vue更新对象里面的数组后如何能够实时渲染出数据？

Question

如：

<div v-for="(user,userIndex) in users" :key="userIndex">
    <div>
        <span>{{user.name}}</span>
        <div v-for="(friend,friendIndex) in user.friends" :key="friendIndex">    
            {{friend.name}}
        </div>
    </div>
</div>
...
data(){
  return{
        users:[{
            name:'zhangwei',
            age:'18',
            friends:[{
                name:'wangwang',
                age:19
            }]
        }]
  }
},
...

好，上面代码都没有问题，那么现在我有个方法是更新users里面的friends数据，如下：

...
methods:{
    updateFriends(){
        let newFriends = [{
            name:'lilei',
            age:20
        },{
            name:'hanmeimemi',
            name:18
        }];
        
        this.users.forEach(user=>{
            user.friends = newFriends;//但是我这样赋值并没有更新渲染，这是 怎么回事？如何修改？
        })
    }
}
...

Answer 1

    updateFriends(){
        let newFriends = [{
            name:'lilei',
            age:20
        },{
            name:'hanmeimemi',
            name:18
        }];
        
        this.users = this.users.map(user => {
            return {...user, friends: newFriends}
        })
    }

Answer 2

你这个应该没问题啊
操作的不是数组下标，是数组里的对象应该可以更新
我试了一下也可以

Answer 3

建议排查下，是不是有增减users成员

Answer 4

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新，例如：

Vue.set(example1.items, indexOfItem, newValue)

或者

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

解决第二类问题

example1.items.splice(newLength)

Answer 5

如果用你这种写法的话，官方文档有说明，用$set。推荐直接替换数据模型里的users