Vue数据更新，视图不更新问题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue


写点赞功能时，点赞后已经追加到对象里了，但是视图没有更新。

查找了些资料：

数据已经更新了但是视图不更新的问题，有几个原因：

1、根属性不存在，而想要直接给根属性赋值导致的视图不更新。此时初始化属性的时候给根属性初始化一个空值就可以了。

2、只有通过以下几个方法更新数组

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

vue才能检测到数组更新。如果想直接通过下标修改数组的话，就需要使用vm-set 方法来通知vue你更新了这个数组。

语法为：

vm.$set( target, key, value )
Vue.set(vm.obj,'k1','v1')
this.$set(this.obj,'k1','v1')
this.obj = Object.assign({}, this.obj)
this.obj = Object.assign({}, this.obj,{'k1','v1'})

对象添加可以使用：

this.$set(对象名,属性,值)

-----------------------------------------------2019/3/22更新-----------------------------------------

//这块思路 因为得异步更新，点赞后单独更新这一条
//vue数据更新后 同步更新视图 对于对象来说要用Vue.set这种写法
//先把用户点赞的 moment_id存进对象，{51:true,60:true,...},
//判断对象中的属性，v-if="zan_obj[item.id]" 为true就亮红心，用过滤器使点赞数值+1
//下拉刷新时，清空此对象，此时使用数据库中的点赞状态数据
Vue.set(vm.zan_obj,mom_,true);

以上是 Vue数据更新，视图不更新问题 的全部内容， 来源链接： utcz.com/z/378403.html

回到顶部