vue中修改了数据但视图无法更新的情况[转载]
我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况：
1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到
数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以
- Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
- filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
- Vue 不能检测以下变动的数组：
- ① 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
- ② 当你修改数组的长度时，例如： vm.items.length = newLength
话不多说，上代码,并且附上效果图：
<body>
<div id="app">
<ul>
<li v-for="(item,index) in gc">
<span>{{item.name}}-{{index}}</span>
<span>{{item.age}}-{{index}}</span>
</li>
</ul>
<button @click="add">click</button>
</div>
<script>
new Vue({
el:'#app',
data:{
gc:[
{name:'zhangsan',age:10},
{name:'lisi',age:21},
{name:'wangwu',age:22},
{name:'wangwu',age:22}
]
},methods:{
// 当点击事件触发时候会修改掉gc[0]的值为lisi,但是视图不会发生变化
add(){
this.gc[0] ={name:'lisi',age:22}
}
}
})
</script>
</body>
以上Vue 不能检测数据变动的数组的2种方式解决办法
将代码中的add()方法改为:
add(){ // this.gc[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到 Vue.set(this.gc,0,{name:'lisi',age:22}) //这样就能被vue监控到，更新视图 }
vue中修改了数据但视图无法更新的情况[转载]的更多相关文章
- vue中修改了数据但视图无法更新的情况
数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...
- vue中修改了数据但视图无法更新的情况（转）
原文地址:https://blog.csdn.net/qq_39985511/article/details/79778806
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- ResultSet遍历过程中修改自身数据，不会改变循环的过程
ResultSet遍历过程中修改自身数据,不会改变循环的过程: import java.sql.Connection; import java.sql.PreparedStatement; impor ...
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
- MySQL_(Java)使用JDBC向数据库中修改(update)数据
MySQL_(Java)使用JDBC向数据库发起查询请求 传送门 MySQL_(Java)使用JDBC向数据库中插入(insert)数据 传送门 MySQL_(Java)使用JDBC向数据库中删除(d ...
- 如何在vue中修改动态标签中的样式和修改组件库样式
vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...
- vue中什么样的数据可以是在视图中显示
1. Vue中不可以添加不存在的属性,因为不存在的属性是没有getter和setter的. <div id="app"> {{msg.a}} {{msg.b}} < ...
- 搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视 ...
随机推荐
- 基于element-ui的多选下拉框和tag标签的二次封装
前言: 今年这大半年我主要负责公司的后台教务管理的开发,这个管理系统目前主要是给公司的内部人员去配置公司的核心项目(例如:熊猫小课)的所有数据,例如课程的配置.课程期数的配置.课程版本的配置.活动的配 ...
- P2799国王的魔镜
链接 想了好久(蒟蒻的不能蒟蒻) 题解: #include<iostream>#include<cstdio>#include<cstring>#include&l ...
- Redis单线程单进程为什么效率那么高
1.完全基于内存,绝大部分请求是纯粹的内存操作,非常快速.数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1): 2.数据结构简单,对数据操作也简单,Red ...
- css文字链接滑过向上移动1像素
方法一:行高 a{line-height:22px;} a:hover{line-height:21px;} 方法二:定位 a{position:absolute;top:0;} a:hover{ ...
- Linux入门：常用命令：查看硬盘、分区、CPU、内存信息
查看硬盘信息 $df -lh #查看所有硬盘的使用状 $du -sh /etc #查看etc目录大小 #获得文件大小很方便,主要是目录 外部系统挂载 $mount ...
- 几个常用的SQL 时间函数
--当月第一天declare @startFirstDate datetimeset @startFirstDate=dateadd(dd,datediff(dd,0,getdate()),-day( ...
- 1-Lombok工具使用
1.先给Eclispe安装Lombok插件 首先下载 lombok-1.16.6.jar 这个jar包 存放在系统任意盘里面 我这里是放在 c:\lombok-1.16.6.jar 运行命令 点 ...
- cocos源码分析--绘制顺序LocalZOrder、GlobalZOrder、OrderOfArrival
使用规则 节点的渲染顺序跟节点的三个成员变量有关(_localZOrder._globalZOrder._orderOfArrival)分别对应三个设置函数setLocalZOrder.setGlob ...
- 基于centos7的真实机环境下安装 vmware workstastion
通常我们在在虚拟机里面搭建大数据集群,如果我们换在真实机里面搭建大数据集群的话, 我们的每一台电脑就是centos系统了,这个时候如果我们需要按vmware 软件的话我们就需要下载不同的版本了 废话不 ...
- 学习Python 新去处：Python 官方中文文档
Python 作为世界上最好用的语言,官方支持的文档一直没有中文.小伙伴们已经习惯了原汁原味的英文文档,但如果有官方中文文档,那么查阅或理解速度都会大大提升.本文将介绍隐藏在 Python 官网的中文 ...