观察：嵌套对象为真 - NuxtJS (Vue)，最新版本

Question

我有一个表单，其中包含许多附加到数据的字段 - this.myData:

 data: function() {

  return {
    isDataChanged: false,
    myData: {},
    myChangedData: {
        default: '',
        default1: {},
        default2: []
    },
  }
},

myData 从服务器的响应中填充，并填充表单值。 myChangedData 用于新值，已更改 v-on:input="onChangeMyData($event, 'default')":

   onChangeMyData(e, name, required = false){
          const val = e.target.value.trim();

          this.myChangedData[name] = val;
          console.log(this.myChangedData)

          this.checkIsmyDataChanged();
      },

我可以使用相同的方法，提供一个密钥作为第二个参数。使用方法 checkIsmyDataChanged 我正在检查它是否更改了表单中的某些字段。此方法循环遍历 myChangedData 并将其属性与 changedData 进行比较，如果存在差异 this.isDataChanged = true.

问题是，我的结构很复杂 mydata/mydatachanged。 default1 中有对象，default1 是一个对象数组。这意味着，我不能使用 onChangeMyData，而是使用其他具有不同检查（验证）的方法，现在我需要调用所有这些方法 this.checkIsmyDataChanged();.

我为 myChangedData 创建了一个手表：

 watch:{
      myChangedData: {
          handler: function (newVal) {
              console.log('change')

          },
          deep: true
      },
  },

，但它不会在更改数据时执行

Answer 1

你试过 Vue.set 了吗？ Source

将this.myChangedData[name] = val;改为

this.$set(this.myChangedData, 'name', val)

多亏了这一点，应该检测到对象上的修改并执行观察程序。

观察：嵌套对象为真 - NuxtJS (Vue)，最新版本

watch: true for nested objects - NuxtJS (Vue), latest version

javascript

vue.js

nuxt.js

nuxtjs