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

查找了些资料:

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

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---数据更新,视图不更新问题的更多相关文章

  1. VUE 数据更新 视图没有更新

    3.还有个小技巧 当数据已经更新了 但是视图没有更新的时候  比如 这里  视图并没有更新 说明aa这个方法中没有触发视图更新 只要这里面随便一个对象能触发更新 则所有的视图更新都会生效 在data中 ...

  2. VUE数据更新视图不更新的原因

    当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength 数组更新只能通过 ...

  3. Vue数据更新页面没有更新问题总结

    Vue数据更新页面没有更新问题总结 1. Vue无法检测实例别创建时不存在于data中的property 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以p ...

  4. 解决vue中对象属性改变视图不更新的问题

    在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...

  5. vue中修改了数据但视图无法更新的情况

    数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...

  6. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

  7. Vue 嵌套数组 数组更新视图不更新

    关于Vue的响应式原理,可以看官方文档或其他资料, https://www.jianshu.com/p/34de360d6035 data里定义了一个数组arr,数组的元素可以是同样格式的数组arrC ...

  8. vue v-for中的item改变无法引起视图的更新

    写过angularjs的同学知道,如果ng-repeat中的item绑定到对应的model,item改变是会引起视图的更新的,但是vue中不起作用,具体的解决办法: 在vue脚手架中,首先引入vue ...

  9. sublime text3 - vue修改data,视图无更新

    ubuntu系统使用sublime text3做vue开发的时候遇到了一个问题,就是修改vue文件并保存后视图页面并不会随之修改,只有重新run dev时修改才会生效,原因没找到 猜想应该是subli ...

随机推荐

  1. Python自动化开发 - 字符编码、文件和集合

    本节内容 字符编码 文件操作 集合 一.字符编码 1.编码 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.解决思路:数字与符号建立一对一映射,用不同数字表示不同符号. ASCI ...

  2. inline&friend&操作符重载

    (1).inline:是一种以空间换时间的做法省去调用函数的额外开销,提高程序的运行效率,它对于编译器而言只是一种建议 (2).友元函数:是可以直接访问类的private成员的非成员函数.它是定义在类 ...

  3. 怎么找到与你Eclipse匹配的spring tool suite插件

    在Eclipse中安装插件是很简单的,但是某些插件需要与你的Eclipse的版本对应才能用,比如spring的插件. 首先,查看你的Eclipse的版本. 从eclipse的Help菜单的About ...

  4. Junit测试时,如何截获到Console的输出

    RT: 参考如下Junit 测试代码: 注释部分 import java.io.ByteArrayOutputStream; import java.io.PrintStream; import st ...

  5. cnn公式推导

    CNN公式推导 1 前言 在看此blog之前,请确保已经看懂我的前两篇blog[深度学习笔记1(卷积神经网络)]和[BP算法与公式推导].并且已经看过文献[1]的论文[Notes on Convolu ...

  6. 什么是PAGELATCH和PAGEIOLATCH

    在分析SQL server 性能的时候你可能经常看到 PAGELATCH和PAGEIOLATCH.比方说 Select * from sys.dm_os_wait_stats 的输出里面就有Latch ...

  7. 使用System.Net.Mail中的SMTP发送邮件(带附件)

    System.Net.Mail 使用简单邮件传输协议SMTP异步发送邮件 想要实现SMTP发送邮件,你需要了解这些类 SmtpClient :使用配置文件设置来初始化 SmtpClient类的新实例. ...

  8. 不合法的DB Index

    redis报错,Invalid Db Index . 需要清理一下redis, 进入redis文件加下,登录redis, redis-cli ,输入账号密码, flush all, 回收程序池,重新生 ...

  9. 【BZOJ2589】 Spoj 10707 Count on a tree II

    BZOJ2589 Spoj 10707 Count on a tree II Solution 吐槽:这道题目简直...丧心病狂 如果没有强制在线不就是树上莫队入门题? 如果加了强制在线怎么做? 考虑 ...

  10. pm2 官方文档 学习笔记

    一.安装 1.安装 npm install pm2 -g 2.更新 npm install pm2 -g && pm2 update pm2 update 是为了刷新 PM2 的守护进 ...