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入门 - 语言基础 - 01.Java简介
原文地址:http://www.work100.net/training/java-intro.html 更多教程:光束云 - 免费课程 Java简介 序号 文内章节 视频 1 概述 2 主要特性 3 ...
- 国产CPU 申威1621 异数OS基础组件理论性能测试报告
国产CPU 申威1621 异数OS基础组件理论性能测试报告 文章目录 国产CPU 申威1621 异数OS基础组件理论性能测试报告 前言 测试平台 测试项目 SW1621 异数OS 容器虚拟交换机模拟性 ...
- C++ vector对象是如何增长的
为了支持快速随机访问,vector将元素连续存储---每个元素紧挨着前一个元素存储. 如果没有空间容纳新元素: 容器必须分配新的内存空间来保存已有元素和新元素,将已有元素从旧位置移动到新空间中,然后添 ...
- XML学习笔记——关于XML解析器
本篇文章基于W3C而写 在Firefox及其他浏览器中的XML解析器(除IE) var xmlDoc=document.implementation.createDocument("&quo ...
- Drupal SA-CORE-2019-010 .开头文件名(如.htaccess) 文件上传
目录 drupal .开头文件名 文件上传 原生模块分析 第三方模块分析 补丁 参考 drupal .开头文件名 文件上传 通过diff 8.8.1的补丁,很容易发现修复点,位于core\module ...
- (转)Bypass xss过滤的测试方法
from wooyun//五道口杀气 · 2014/01/02 19:16 0x00 背景 本文来自于<Modern Web Application Firewalls Fingerprinti ...
- pyautogui介绍
https://pyautogui.readthedocs.io/en/latest/introduction.html Introduction Purpose The purpose of PyA ...
- 总是在起头可是能怎么办呢 Python数据分析
目录 前言1 第1章准备工作5 本书主要内容5 为什么要使用Python进行数据分析6 重要的Python库7 安装和设置10 社区和研讨会16 使用本书16 致谢18 第2章引言20 来自bit.l ...
- python读取文件使用相对路径的方法
场景描述: python传统的读取文件的方法,通过读取文件所在目录来读取文件,这样出现的问题是,如果文件变更了存储路径,那么就会读取失败导致报错 如下方脚本 def stepb(a):#写入txt f ...
- 什么是C/S结构，其和B/S有什么区别很联系呢
什么是C/S结构,其和B/S有什么区别很联系呢 原地址:https://zhidao.baidu.com/question/12962713.html C/S结构即服务器/客户机结构.C/S结构通常采 ...