javascript - Vue.js使用函数操作data中对象的属性不触发更新
本文介绍了javascript - Vue.js使用函数操作data中对象的属性不触发更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
学习Vue.js框架遇到这个问题,列表渲染中的对象迭代部分,我在data中放了一个object对象,并在li元素中放了一个button元素用于删除对应迭代的属性,但是点击按钮后,object中的对应属性被删除了,但是视图中没有更新,被删除的属性还在。请问这是什么原因。
var list1 = new Vue({
el:'#list1',
data:{
parentMessage:'Fuck',
object:{
firstName:'Coma',
lastName:'Cc'
}
},
methods:{
remove:function(index){
//Array.prototype.splice.call(this.object, index, 1);
delete((this.object)[index]);
}
}
})
<ul id="list1">
<li v-for="(value, key, index) in object">
{{ index }} - {{ key }} - {{value}}
<button v-on:click="remove(key)">Delete</button>
</li>
</ul>
解决方案
修改obj,要用Object.assign方法来操作,才能让vue的对象触发变化
还有,对象一般只有修改对象属性的值,很少删除对象属性
var obj = {
a:1,
b:2
};
obj = Object.assign({},obj,{a:3});
obj = {
a:3,
b:2
};
这篇关于javascript - Vue.js使用函数操作data中对象的属性不触发更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文