添加或删除成员时vue对象无法实时更新的解决方案

前阵子，当我把项目搬到Vue的时候，我遇到了一个突然的问题

当对象添加或删除成员时，页面不能实时更新呈现，但数组是正常的

视觉上，ob没有听到对象成员的任何变化

看了一些人的帮助回答，说是ob监控数组长度的变化对象。默认情况下，当没有长度来添加新成员时，它本身不会添加长度

所以我无法监控对象的变化。最近脑子太累了，看不下文件。

废话不多说。解决办法是直接编码

您可以在实例中使用$set和$delete

这个。$set(this.age，' age '，18岁)；这个。$delete(this.age，' age ')；也可以直接调用Vue的设置和删除

let vm=new Vue({ el : '#app '，data : { age : } } })；Vue.set(vm.age，' age '，18岁)；Vue.delete(vm.age，' age ')；PS:vue向数组和对象添加和删除字段，而不更新数据-Vue。集合(对象、键、值)

组件基本代码：

style lang=' sass '/style template div/div/div/template script导出默认值{ data(){ return } }，methods: {史策(){ } }/script 1。添加和删除数组(通过推送数组排除)

/style templatediv div div v-for=' items in items ' span { { item } }/span/div button @ click='史策' anniu/button/div/div/template script导出默认{ data(){ return { items: [11，22]，obj: { a: 'aa '，b: 'bb' } }，methods: {史策(){ this . items[2]=33；//此写入数据无法重新呈现。} } }/脚本点击按钮操作史策事件前后没有变化

解决方法：

也就是说，可以实现使用数据的推送方法

使用Vue.set方法

具体实现如下：

方法： {史策(){这。$ set(这个。items，2，33)}}，同样，如果items :[{ a : ' 11 ' }]items :[{ a : ' 11 '，b:' 22

div v-for=' items in items ' span v-for='(I，j)in items ' { I } }-{ { j } }/span/div this.items[0]=object . assign({ }，this . items[0]，{ b : ' 22 ' })；这个。$set(this.items，0，this . items[0])；2.向对象添加新属性(同样如此)

template div v-for=' item in obj ' span { { item } }/span/div/div/template data(){ return { obj : ' aa '，b: ' bb ' } } } methods: {史策(){ this . obj[' c ']=' 000 '；//不起作用。这个。$set(this.obj，' c '，' 000 ')；//works}}，这是本文的全部内容。希望对大家的学习有帮助，支持我们。