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基础知识点(数组的地址值及元素访问和动态初始化数组默认初始值的变化规律)