Vue使用v-for显示列表时，数组里的item数据更新，视图中列表不同步更新的解决方法
- 由于初始化类型错误导致的不更新，代码是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app-7">
<div @click="update()">update</div>
<ol>
<li v-for="item in groceryList" v-bind:key="item.id">
{{item.text}}
</li>
</ol>
</div>
</body>
<script type="text/javascript">
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: []
},
methods: {
update: function() {
this.groceryList[0].text = "newvalue"
}
},
created: function() {
let adddata = [];
adddata.id = 0;
adddata.text = "test";
this.groceryList.push(adddata);
}
});
</script>
</html>
使用索引直接更新数组中的项目，比如：
this.groceryList[0].text = "newvalue"
发现视图中的项目并不会更新
问题出在 let adddata = []; 写错了，让adddata是一个数组类型了，vue在监听数据更新的时候，判断是数组类型，并不会对它的属性的变更做处理，而只会对数组里元素的改变做处理，把 let adddata = []; 改成 let adddata = {};即可
或这样也可以：
let adddata = {
id: 0,
text: "test"
};
this.groceryList.push(adddata);
- vue不能检测到数组元素的直接赋值，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app-7">
<div @click="update()">update</div>
<ol>
<li v-for="item in groceryList" v-bind:key="item.id">
{{item.text}}
</li>
</ol>
</div>
</body>
<script type="text/javascript">
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: []
},
methods: {
update: function() {
this.groceryList[0] = {
id: 0,
text: "newvalue"
};
}
},
created: function() {
let adddata = {
id: 0,
text: "test"
};
this.groceryList.push(adddata);
}
});
</script>
</html>
this.groceryList[0] = {
id: 0,
text: "newvalue"
};
}
vue不能检测这种改变，只能检测到push,pop等元素出入栈的操作
可以改成这样,把旧元素替换成新元素（旧元素出栈，新元素入栈）
update: function() {
this.groceryList.splice(0, 1, {
id: 0,
text: "newvalue"
});
}
},
即使groceryList是一个普通的非对象数组，也需要这样才能同步更新视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app-7">
<div @click="update()">update</div>
<ol>
<li v-for="item in groceryList" v-bind:key="item.id">
{{item}}
</li>
</ol>
</div>
</body>
<script type="text/javascript">
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: []
},
methods: {
update: function() {
//this.groceryList[0] = "newvalue";//不行
this.groceryList.splice(0, 1, "newvalue");
}
},
created: function() {
let adddata = "test";
this.groceryList.push(adddata);
}
});
</script>
</html>
Vue使用v-for显示列表时，数组里的item数据更新，视图中列表不同步更新的解决方法的更多相关文章
- vue 中数据没有同步渲染的解决方法
今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayO ...
- 解决loadrunner在脚本回放时长时间等待及在vugen中create controller scenario时报错的方法！超管用！！
解决loadrunner在脚本回放时长时间等待及在vugen中create controller scenario时报错的方法 经过咨询,有两种方法.经过实践,下面的方法1有效,方法2无效(我下载安装 ...
- 安装rosetta2016时出现git@172.16.25.11s password: \r\nPermission denied错误，解决方法。
当在source目录执行 ./external/scons-local/scons.py -j8 mode=release bin 时,报错 git@.11s password: \r\nPermis ...
- Django的POST请求时因为开启防止csrf，报403错误，及四种解决方法
Django默认开启防止csrf(跨站点请求伪造)攻击,在post请求时,没有上传 csrf字段,导致校验失败,报403错误 解决方法1: 注释掉此段代码,即可. 缺点:导致Django项目完全无法防 ...
- Delphi XE8中开发DataSnap程序常见问题和解决方法 （三）用TClientDataSet的“ProviderName”属性连接服务器时，无法找到服务器端的“DatasetProvier”
当我们在客户端用TClientDataSet的“ProviderName”属性连接服务器时,无法找到服务器端的“DatasetProvier”!! 问题原因:服务器端对提供服务的控件所属单元选择错误. ...
- Xshell连接linux（deepin）时提示ssh服务器拒绝了密码，请再试一次解决方法
用Xshell root连接时显示ssh服务器拒绝了密码,应该是应该是sshd的设置不允许root用户用密码远程登录 修改 /etc/ssh/sshd_config文件,注意,安装了openssh才会 ...
- 织梦更新列表页提示Fatal error: Call to a member function GetInnerText() on a non-object 解决方法
今天在做一个站时用到了自定义模型,遇到了些问题,在更新列表页时提示: Fatal error: Call to a member function GetInnerText() on a non-ob ...
- sql sever 2012重装数据库时，出现cannot find one or more components, Please reinstall the application.解决方法
错误原因: 由于我将SQL数据库做了删除,重装.在删除的过程中,不小心删除了某个SQL的插件,导致了这种问题的出现. 当我们去操作工具时,也会提示以上错误. 解决办法: 1)去控制面板--所有控制面板 ...
- Vue 中 diff 算法后更新 DOM 的方法
vue 2.0加入了 virtual dom,在 node_modules\vue\src\core\vdom\patch.js 中会对虚拟 DOM 进行 diff 算法等,然后更新 DOM. 网上的 ...
随机推荐
- Java架构师线上问题排查，这些命令程序员一定用得到！
Java架构师线上问题排查,这些命令程序员一定用得到! 线上问题排查,以下场景,你遇到过吗? 一.了解机器连接数情况 问题:1.2.3.4的sshd的监听端口是22,如何统计1.2.3.4的sshd服 ...
- Vue 组件 传值
注意 Vue模板只能有一个对象,要想用多个对象时用div包裹 一.父组件->子组件 通过props 1.子组件: 声明:proprs =[‘xx’],xx是在父组件中引用子组件,子组件的属性(t ...
- Django2 外键遇到的坑
# 出版社 class Publisher(models.Model): # 自增.主键 id id = models.AutoField(primary_key=True) # varchar(32 ...
- MySQL军规升级版（转）
一.基础规范 表存储引擎必须使用InnoDB 表字符集默认使用utf8,必要时候使用utf8mb4 解读:(1)通用,无乱码风险,汉字3字节,英文1字节(2)utf8mb4是utf8的超集,有存储4字 ...
- C++中虚析构的作用
为了当用一个基类的指针删除一个派生类的对象时,派生类的析构函数会被调用. 基本概念: 析构函数是用来回收对象的: 虚析构函数是析构函数的一种: 基类是一类对象共有属性的抽象.比如,猫和狗都是动物,都会 ...
- mongo 查询 距离 某个点 多少 米距离 感谢 提供的数据。 感谢 mvc的 demo 。反正 就是各种感谢 文档之类的。
昨天 去面试来着, 问了一下mong . 我记得mong支持 地理位置索引的,说了一下. 然后 面试官说 查询某个点 的 多少米范围, 这个该怎么实现? 我懵逼了.... 回去 查询了一下. 发现有 ...
- Python学习，第六课 - 集合
Python中集合的相关操作 集合是一个无序的,不重复的数据组合 它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 list_1 =set ...
- Java容器解析系列(15) HashTable Dictionary & Properties
HashTable的实现原理与HashMap没有什么区别; 其与HashMap的主要区别如下: 添加进入jdk时间:HashTable在jdk1.0时添加,HashMap在jdk1.2时添加; 类签名 ...
- openpyxl库实现对excel文档进行编辑（追加写入）
首先,这个库只支持xlsx格式的excel文件 预期,对”excel_test.xlsx“的A1单元格写入”hello word“ 1.安装”openpyxl“库,pip install openpy ...
- C#反射与特性(四)：实例化类型
目录 1,实例化类型 1.1 Activator.CreateInstance() 1.2 ConstructorInfo.Invoke() 2,实例化委托 3,实例化泛型类型 3.1 实例化泛型 3 ...