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. 网上的 ...
随机推荐
- Python的re模块，正则表达式用法详解，正则表达式中括号的用法
Python的re模块,正则表达式 #导入re模块 import re 1.match方法的使用: result = re.match(正则表达式,待匹配的字符串) 正则表达式写法: 第一部分: 字 ...
- Java入门 - 语言基础 - 10.条件语句
原文地址:http://www.work100.net/training/java-if-else.html 更多教程:光束云 - 免费课程 条件语句 序号 文内章节 视频 1 概述 2 if...e ...
- Qt Installer Framework翻译(5-4)
自定义安装程序 您可以使用脚本通过以下方式来自定义安装程序: > 添加Qt Installer Framework操作,该操作由脚本提供,并由安装程序执行. > 添加新页面,该页面由您在p ...
- [bzoj4567] [loj#2012] [SCOI2016] 背单词
Description \(Lweb\) 面对如山的英语单词,陷入了深深的沉思,「我怎么样才能快点学完,然后去玩三国杀呢?」.这时候睿智的凤老师从远处飘来,他送给了 \(Lweb\) 一本计划册和一大 ...
- 源码的说明 ASP.NET MVC 5框架揭秘.zip
第1章 S101 MVP(SC)模式中Presenter与View之间的交互 S102 迷你版的ASP.NET MVC框架 第2章 S201 通过路由实现请求地址与.aspx页面的映射 S202 基本 ...
- LightningChart® .NET 8.5版重磅上线，新年特惠
新年回馈用户 新年伊始,全球领先的数据可视化图表工具LightningChart®正式发布了.Net 8.5版本,新版软件在外观.功能和用户体验上都做了突破性的改进.LightningChart®同时 ...
- Client API Object Model - Grid Context（3.3)
Grids 网格,以表格的形式显示数据, 网格可以跨越整个form,也可以是form中的一项. 被称为子网格(subgrid). grid有两种, 一种是read-only grid, 另一种是edi ...
- NOde.js的安装和简介
1.nodejs的安装 1.1 检测nodejs的版本 node -v (version:版本) 1.2 path配置nodejs 的环境变量(当前版本都是自动安装配置环境变量)指令: path 1. ...
- Nginx核心模块
error_log 语法:error_log file [ debug | info | notice | warn | error | crit ]默认值:${prefix}/logs/error. ...
- ajax--->请求异常 jQuery提示parsererror错误解决办法
ajax请求异常 jQuery提示parsererror错误解决办法 原因:出现这个错误是因为后端返回的数据类型和前端请求中dataType的要求类型不一致导致的. dataType简介:jquery ...