在方法中触发更改后，Vue 3 数据未更新

Question

我想了解 Shopify 主题的 Vue 3 数据管理。在完成基于 Vue 2 的旧代码后，我无法通过更改 methods 函数中的值来更新 data 对象。

下面是有问题的代码段。

Vue.createApp({
  delimiters: ['${', '}'],//for NO CONFLICT with liquid theme
  data: () => {
    return {
      message: 'Hello Vue'
    }
  }, //data ends
  methods: {
    setMessage: (params) => {
      //setting new message
      this.message = params;
      
    }
  }, //methods ends
}).mount('#app1')

<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>

<div id="app1">
  <h5>${ message }</h5>
  <button v-on:click="setMessage('new message')">Submit</button>
</div>

Answer 1

像这样定义方法setMessage(params) {不这样setMessage: (params) => {

在方法中触发更改后，Vue 3 数据未更新

Vue 3 data is not updating after change triggered in methods

shopify

vue.js

vuejs3