Vue Watch未触发

  • Z时代
  • 2024-01-10
  • 分类：问答

尝试使用vue watch方法，但即使使用，它似乎也不会触发某些对象deep:true。

在我的组件中，我收到一个数组作为prop，它们是创建以下表单的字段。我可以构建表单并将其动态绑定到一个名为的对象，crudModelCreate并且一切正常（我在vue开发工具中看到，甚至可以按计划提交表单作品）

但是我在尝试观察该动态对象的变化时遇到了问题。

  <md-input v-for="(field, rowIndex) in fields" :key="field.id" v-model="crudModelCreate[field.name]" maxlength="250"></md-input>
   ...
   data() {
      return {
         state: 1, // This gets changed somewhere in the middle and changes fine
         crudModelCreate: {},
      }
   },
   ...
   watch: {
        'state': {
            handler: function(val, oldVal) {
                this.$emit("changedState", this.state);
                // this works fine
            },
        },
        'crudModelCreate': {
            handler: function(val, oldVal) {
                console.log("beep1")
                this.$emit("updatedCreate", this.crudModelCreate);
                // This doesn't work
            },
            deep: true,
            immediate: true
        },
    }

回答：

来自文档

由于现代JavaScript的局限性（以及Object.observe的放弃），Vue无法检测到

。由于Vue在实例初始化期间执行getter / setter转换过程，因此数据对象中必须存在一个属性，以便Vue对其进行转换并使其具有反应性。

请看一下深度的反应性https://vuejs.org/v2/guide/reactivity.html#Change-Detection-

Caveats

以上是 Vue Watch未触发 的全部内容， 来源链接： utcz.com/qa/406023.html

回到顶部