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

Posted 2023-02-16

【中文标题】Vuejs 观察动态数组元素的变化

【英文标题】：Vuejs watch dynamic array element on change

【发布时间】：2021-07-15 08:31:56

【问题描述】：

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

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

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

【参考方案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();
        
    ,

【讨论】：

嗨，感谢您的帮助，但奇怪的是它不起作用，当我检查 console.log 时，newValue 和 oldValue 都包含 newValue，所以不满足条件

"注意：当改变（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。Vue 不保留副本变异前的值。”来自 vue 文档的继承人，那么我如何跟踪对象内部的变化？

感谢更新，但仍然无法正常工作，我认为因为文档所说，oldval 与 newval 相同

我又更新了 XD。试试看，如果有效。

是的！！！！是工作！ omg, 非常感谢,, 解决这个问题超过24小时, 你在15分钟内解决了,, :DDD