vue.js 反应性不适用于对象数组答案

【问题标题】：vue.js reactivity not working for object arrayvue.js 反应性不适用于对象数组
【发布时间】：2020-07-02 03:55:40
【问题描述】：

vue.js 反应性不适用于对象数组。

html .. 
<div v-if="a && a.arr" v-for="k in a.arr">
  {{k.name}}
</div>

data .. 
{
   a:{}
} 
methods ..
{
 updateA(){
   a.arr=[];
   a.arr.push({name:'abc'});
 },

 updateA2(){ 
   let b = a.arr && a.arr[0];
   if(b){
    b.name='xyz';
    // Vue.set(b,'name','xyz');
   }
 }

}

甚至尝试过 Vue.set 或 this.$set 但无济于事

【问题讨论】：

在你的数据中，使用a: { arr: [] }，在a中声明arr。
“不工作”是什么意思？当前的行为是什么？预期的行为是什么？也请通读How do I ask a good question?
@Psidom 回答可能会有所帮助，另一种方法是使用updateA2 中的集合，例如Vue.set(a, 'arr', []);
您的 sn-p 按预期工作 - 您使用它的方式应该没有反应性

标签： vue.js

【解决方案1】：

你应该这样尝试：

html .. 
<div v-if="a && a.arr" v-for="k in a.arr">
  {{k.name}}
</div>

data()
{
  return {
   a: {
     arr: [],
   }
  };
} 
methods:
{
 updateA(){
   a.arr=[];
   a.arr.push({name:'abc'});
 },

 updateA2(){ 
   let b = a.arr && a.arr[0];
   if(b){
    this.$set(b,'name','xyz');
   }
 }

}

【讨论】：