时间戳

首页 > 解决方案 > Vuejs 观察动态数组元素的变化

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

问题描述

我正在使用名称和地址字段创建此文本编辑器

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

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

标签： arraysvuejs2

解决方案

如果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();
        }
    },
}

推荐阅读