• 由于初始化类型错误导致的不更新，代码是这样的：
<!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数据更新，视图中列表不同步更新的解决方法的更多相关文章

  1. vue 中数据没有同步渲染的解决方法

    今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayO ...

  2. 解决loadrunner在脚本回放时长时间等待及在vugen中create controller scenario时报错的方法！超管用！！

    解决loadrunner在脚本回放时长时间等待及在vugen中create controller scenario时报错的方法 经过咨询,有两种方法.经过实践,下面的方法1有效,方法2无效(我下载安装 ...

  3. 安装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 ...

  4. Django的POST请求时因为开启防止csrf，报403错误，及四种解决方法

    Django默认开启防止csrf(跨站点请求伪造)攻击,在post请求时,没有上传 csrf字段,导致校验失败,报403错误 解决方法1: 注释掉此段代码,即可. 缺点:导致Django项目完全无法防 ...

  5. Delphi XE8中开发DataSnap程序常见问题和解决方法 （三）用TClientDataSet的“ProviderName”属性连接服务器时，无法找到服务器端的“DatasetProvier”

    当我们在客户端用TClientDataSet的“ProviderName”属性连接服务器时,无法找到服务器端的“DatasetProvier”!! 问题原因:服务器端对提供服务的控件所属单元选择错误. ...

  6. Xshell连接linux（deepin）时提示ssh服务器拒绝了密码，请再试一次解决方法

    用Xshell root连接时显示ssh服务器拒绝了密码,应该是应该是sshd的设置不允许root用户用密码远程登录 修改 /etc/ssh/sshd_config文件,注意,安装了openssh才会 ...

  7. 织梦更新列表页提示Fatal error: Call to a member function GetInnerText() on a non-object 解决方法

    今天在做一个站时用到了自定义模型,遇到了些问题,在更新列表页时提示: Fatal error: Call to a member function GetInnerText() on a non-ob ...

  8. sql sever 2012重装数据库时，出现cannot find one or more components, Please reinstall the application.解决方法

    错误原因: 由于我将SQL数据库做了删除,重装.在删除的过程中,不小心删除了某个SQL的插件,导致了这种问题的出现. 当我们去操作工具时,也会提示以上错误. 解决办法: 1)去控制面板--所有控制面板 ...

  9. Vue 中 diff 算法后更新 DOM 的方法

    vue 2.0加入了 virtual dom,在 node_modules\vue\src\core\vdom\patch.js 中会对虚拟 DOM 进行 diff 算法等,然后更新 DOM. 网上的 ...

随机推荐

  1. 盘它！！一步到位，Tensorflow 2的实战 ！！LSTM下的股票预测（附详尽代码及数据集）

    关键词:tensorflow2.LSTM.时间序列.股票预测 Tensorflow 2.0发布已经有一段时间了,各种新API的确简单易用,除了官方文档以外能够找到的学习资料也很多,但是大都没有给出实战 ...

  2. newSQL 到底是什么？

    数据库发展至今已经有3代了: SQL,传统关系型数据库,例如 MySQL noSQL,例如 MongoDB newSQL SQL 的问题 互联网在本世纪初开始迅速发展,互联网应用的用户规模.数据量都越 ...

  3. javaweb-codereview 学习记录-3

    Class类加载流程 实际上就是ClassLoader将会调用loadclass来尝试加载类,首先将会在jvm中尝试加载我们想要加载的类,如果jvm中没有的话,将调用自身的findclass,此时要是 ...

  4. Linux内存管理解析(一) : 分段与分页机制

    背景 : 在此文章里会从分页分段机制去解析Linux内存管理系统如何工作的,由于Linux内存管理过于复杂而本人能力有限.会尽量将自己总结归纳的部分写清晰. 从实模式到保护模式的寻址方式的不同 : 1 ...

  5. Entity Framework 6+ 连接Mysql

    好吧.这个博客开不开的 我感觉.. 都一样了. 前言: 公司改造Sqlserver ->Mysql Sql2016老夫对不住你啊.. 好 前沿结束. 需要的家伙: 1.mysql-for-vis ...

  6. [bzoj4567] [loj#2012] [SCOI2016] 背单词

    Description \(Lweb\) 面对如山的英语单词,陷入了深深的沉思,「我怎么样才能快点学完,然后去玩三国杀呢?」.这时候睿智的凤老师从远处飘来,他送给了 \(Lweb\) 一本计划册和一大 ...

  7. Linux下Tomcat,mysql安装包及教程整合，

      前段时间孔老师给了一个虚拟机,自己瞎捣鼓,装了Tomcat和mysql,捣鼓了好几天,把一些安装包和试过还不错的博客整理出来:  老师给的已经装好了Linux系统和JDK. Tomcat9安装包 ...

  8. 源码的说明 ASP.NET MVC 5框架揭秘.zip

    第1章 S101 MVP(SC)模式中Presenter与View之间的交互 S102 迷你版的ASP.NET MVC框架 第2章 S201 通过路由实现请求地址与.aspx页面的映射 S202 基本 ...

  9. 数据结构——栈的应用 NOI2.2 括号匹配问题

    栈是一种数据结构,相当于一个容器,将一个又一个变量从顶端压进去,需要使用时,又从顶端拿出来,其具体使用方法,下面是详细讲解: #include<stack>必须使用此头文件 stack&l ...

  10. javascript的对象、类和方法

    1.类和对象的概念: 1.所有的事物都是一个对象,而类就是具有相同属性和行为方法的事物的集合 2.在JavaScript中建立对象的目的就是将所有的具有相同属性的行为的代码整合到一起,方便使用者的管理 ...