Vuejs 观察动态数组元素的变化

Question

我正在创建这个文本编辑器，带有名称和地址字段

<ckeditor :editor="editor" v-model="data[index].name">
<ckeditor :editor="editor" v-model="data[index].address.1">
<ckeditor :editor="editor" v-model="data[index].address.2">

和数据属性

 data() {
    return {
        data:[],
        index:0,
        editor: customedit
    };
  },

编辑器还有两个按钮，next 和 back，方法是 add 和 substracting "index"。 数据，在从服务器挂载之前加载，具有这样的结构

serverdata = [{name:'name1',address:{1:'address 1',2:'address 2'}} , {name:'name2',address:{1:'address 4',2:'address 4'}}]

所以我想做的是，从服务器加载数据后，用户可以在数据之间移动，当用户对其进行更改时，将记录用户更改的数据索引。 到目前为止，我一直在使用这样的深度观察器：

watch: {
    data: {
      handler(val) {
          console.log('the data is changed');
          console.log(this.index + 1);
      },
      deep: true
    }
  },

但是即使没有变化，当我点击下一步时，也会显示日志， 感谢您的任何帮助/建议

Answer 1

如果新旧值不同，您可以在 console.log 中比较它们。 您可以在函数中接收两个参数，如下所示：

handler(newValue, oldValue) {
         if(newValue !== oldValue) {
          console.log('the data is changed');
          console.log(this.index + 1);
         }
      },
     deep: true

您可以将数组中的内容与：

if(JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
          console.log('the data is changed');
          console.log(this.index + 1);
         }
      },
     deep: true

好的，您的问题似乎是在旧值和新值中接收到相同的值。您可以尝试查看计算属性并使用它将数组转换为字符串。即使使用该字符串，您也可以重建旧数组。我试着做一个例子：

data() {
    return {
        yourArray: []
    }
},
computed: {
    yourArrayStr: function () { 
        return JSON.stringify(this.yourArray)
    }
},
watch: {
    yourArrayStr: function(newValue, oldValue) {
        if(newValue !== oldValue){
            let oldValueArray = JSON.parse(oldValue);
            console.log();
            console.log();
        }
    },
}