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

Question

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，但无济于事

Answer 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');
   }
 }

}