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

Awbeci
  • 2.7k

如:

<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;//但是我这样赋值并没有更新渲染,这是 怎么回事?如何修改?
        })
    }
}
...
回复
阅读 4.3k
5 个回答
    updateFriends(){
        let newFriends = [{
            name:'lilei',
            age:20
        },{
            name:'hanmeimemi',
            name:18
        }];
        
        this.users = this.users.map(user => {
            return {...user, friends: newFriends}
        })
    }

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

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

由于 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)
lyx19901219
  • 2
新手上路,请多包涵

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

你知道吗?

宣传栏