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

Posted

技术标签:

【中文标题】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

以上是关于Vuejs 观察动态数组元素的变化的主要内容,如果未能解决你的问题,请参考以下文章

淘汰赛将选择绑定到动态可观察数组

Java基础知识点(数组的地址值及元素访问和动态初始化数组默认初始值的变化规律)

IDL中如何定义 动态数组?

如何将动态生成的 vuejs 数组发布到 mysql 数据库

Vuejs 动态 div 文本

RxSwift 仅在添加新元素时观察数组变化