javascript Vue Watch未触发

ix0qys7i  于 2023-02-28  发布在  Java
关注(0)|答案(3)|浏览(157)

尝试使用vue watch方法,但它似乎无法触发某些对象,即使使用deep:true
在我的组件中,我接收了一个数组作为属性,这些属性是用来创建以下表单的字段。我可以构建表单并将它们动态绑定到一个名为crudModelCreate的对象,一切都很正常(我在vue dev tools中看到,甚至提交表单都按计划进行)
但我有一个问题,试图观看的变化,在动态对象。

<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
        },
    }
vof42yt1

vof42yt11#

从文件上看
由于现代JavaScript的局限性(以及Object. observe的废弃),Vue无法检测属性的添加或删除。由于Vue在示例初始化期间执行getter/setter转换过程,因此数据对象中必须存在属性,以便Vue转换它并使其具有React性。
请深入了解React性www.example.comhttps://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

emeijp43

emeijp432#

在某些情况下,可以通过向包含v-model中传递给它的对象的json字符串的子组件添加key属性来强制刷新。

<Component v-model="deepObject" :key="JSON.stringify(deepObject)" />
wwodge7n

wwodge7n3#

添加此内容以确保完整性。
我有一个问题,我可以得到更新我的手表上只有在ctrl-F5刷新。没有React。我的问题是有点愚蠢。我忘记了包括适当的文件,所以我的这个。$商店浪费不提供任何东西。我修复了它的包括是在我的其他工作文件:

import { mapMutations } from 'vuex'

在此之后,一切都开始工作。

相关问题