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:视 ...
随机推荐
- JSON: 介绍、应用
ylbtech-JSON: 介绍.应用 JSONP(JSON with Padding)是 JSON 的一种“使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的 ...
- 每天一点点oracle
每天一点点oracle sqlplus / as sysdba [oracle@oracle ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.3.0 ...
- [UE4]计算小地图比例尺
一.调整到顶视图,按住鼠标中键从地图的左边拉一根线到右边,可以看到距离是4000厘米(UE4单位是厘米). 二.查看到缩略图片的长度是512px,512/4000 = 0.128,比例尺是0.128. ...
- [UE4]碰撞的随机性
物理引擎(包括碰撞)的计算具有随机性 原因: 一.每一帧的时间并不是严格相等 二.浮点数计算不是完全准确(两个浮点数运算,结果不可重复) 影响 在左边窗口(服务器端)打几发子弹把其中3个立方体的位置打 ...
- [VS工具]如何让#region...#endregion在ashx文件页面上折叠
工具--->选项-->文本编辑器|文件扩展名, 添加后缀名为ashx的文件即可
- BCGcontrolBar(三) 添加表格(Grid)组件
表格组件和图表组件是BCG的亮点之一 如下图 BCG有众多的表格样式可供选择 下图是插入基本表格组件后的效果 首先在程序中添加 BasicGridCtrl.h BasicGridCtrl.cpp 因为 ...
- C++删除容器数据
// free the contents of the list; erase the list inline void ListDelete (list <void *> *pList) ...
- c# 未能加载文件或程序集
最近做项目时碰到这个问题了,goole.百度了半天,整理了以下几种可能: DLL文件名与加载时的DLL文件名不一致, DLL文件根本不存在,即出现丢失情况, 加载DLL路径错误,即DLL文件存在,但加 ...
- StanFord ML 笔记 第九部分
第九部分: 1.高斯混合模型 2.EM算法的认知 1.高斯混合模型 之前博文已经说明:http://www.cnblogs.com/wjy-lulu/p/7009038.html 2.EM算法的认知 ...
- 阅读别人的程序（Java篇）
1.递归求数组最大值 2.转账(事务) 1.递归应用 public class DiGuiDemo3 { public static void main(String[] args) { int[] ...