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---数据更新,视图不更新问题的更多相关文章
- VUE 数据更新 视图没有更新
3.还有个小技巧 当数据已经更新了 但是视图没有更新的时候 比如 这里 视图并没有更新 说明aa这个方法中没有触发视图更新 只要这里面随便一个对象能触发更新 则所有的视图更新都会生效 在data中 ...
- VUE数据更新视图不更新的原因
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength 数组更新只能通过 ...
- Vue数据更新页面没有更新问题总结
Vue数据更新页面没有更新问题总结 1. Vue无法检测实例别创建时不存在于data中的property 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以p ...
- 解决vue中对象属性改变视图不更新的问题
在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...
- vue中修改了数据但视图无法更新的情况
数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...
- vue中修改了数据但视图无法更新的情况[转载]
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...
- Vue 嵌套数组 数组更新视图不更新
关于Vue的响应式原理,可以看官方文档或其他资料, https://www.jianshu.com/p/34de360d6035 data里定义了一个数组arr,数组的元素可以是同样格式的数组arrC ...
- vue v-for中的item改变无法引起视图的更新
写过angularjs的同学知道,如果ng-repeat中的item绑定到对应的model,item改变是会引起视图的更新的,但是vue中不起作用,具体的解决办法: 在vue脚手架中,首先引入vue ...
- sublime text3 - vue修改data,视图无更新
ubuntu系统使用sublime text3做vue开发的时候遇到了一个问题,就是修改vue文件并保存后视图页面并不会随之修改,只有重新run dev时修改才会生效,原因没找到 猜想应该是subli ...
随机推荐
- yum-163源配置
原文:http://mirrors.163.com/.help/centos.html CentOS镜像使用帮助 收录架构 i386 x86_64 SRPMS 收录版本:所有版本更新时间:每4小时更新 ...
- python 使用json格式转换
什么是json: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...
- RocketMQ概述
概述 ApacheRocketMQ是一个低延时.高性能.可靠.海量并且灵活扩展性的分布式消息和流平台,于2017年9月25日成为Apache基金会顶级开源项目.它由4个部分组成:name server ...
- 为什么要使用Entity Framework
本文介绍从DDD(Domain-Driven Design[领域驱动设计])的角度来说说为什么要使用Entity Framework(以下都会简称为EF),同时也看出类似Drapper之类的简陋ORM ...
- 动态分析小示例| 08CMS SQL 注入分析
i春秋作家:yanzm 0×00 背景 本周,拿到一个源码素材是08cms的,这个源码在官网中没有开源下载,需要进行购买,由某师傅提供的,审计的时候发现这个CMS数据传递比较复杂,使用静态分析的方式不 ...
- 【ElasticSearch】:Windows下ElasticSearch+版本安装head
概述 elasticsearch-head,之前插件plugin方式已废弃,现已改为nodejs的NPM安装,独立WEB服务方式. elasticsearch-head网址:https://githu ...
- pythonweb框架Flask学习笔记05-简单登陆
源代码从下链接引用:https://www.cnblogs.com/felixwang2/p/9261493.html 我使用的是python3.6 在运行代码的时候遇到了以下问题 session[' ...
- web socket 入门
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,其优雅地解决了以往web服务器不能向web客户端实时推送消息的问题. 在浏览器js环境中,创建一个websock ...
- windows store app 如何计算字符所占的宽度
最近在做一个PDF电子文档相关的项目,我们的app是运行在Windows 8 / WinRT 下的.由于使用的第三方库的一些技术限制,text area竟然不支持多行文本自动换行.于是我们就需要自己实 ...
- MVC3学习:利用mvc3+ajax实现全选和批量删除
本例数据库操作使用EF code first; 先利用mvc自带的模板,先生成一个list视图,然后再手动添加复选框和删除按钮 <table> <tr> @*在标题行添加一个全 ...