数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被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中修改了数据但视图无法更新的情况的更多相关文章

  1. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

  2. vue中修改了数据但视图无法更新的情况（转）

    原文地址:https://blog.csdn.net/qq_39985511/article/details/79778806

  3. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  4. ResultSet遍历过程中修改自身数据，不会改变循环的过程

    ResultSet遍历过程中修改自身数据,不会改变循环的过程: import java.sql.Connection; import java.sql.PreparedStatement; impor ...

  5. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  6. MySQL_(Java)使用JDBC向数据库中修改(update)数据

    MySQL_(Java)使用JDBC向数据库发起查询请求 传送门 MySQL_(Java)使用JDBC向数据库中插入(insert)数据 传送门 MySQL_(Java)使用JDBC向数据库中删除(d ...

  7. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  8. vue中什么样的数据可以是在视图中显示

    1. Vue中不可以添加不存在的属性,因为不存在的属性是没有getter和setter的. <div id="app"> {{msg.a}} {{msg.b}} < ...

  9. 搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

    搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视 ...

随机推荐

  1. WIN7无法访问共享打印机及文件的解决办法

    故障: 在网上邻居上能看到对方的电脑名字,双击进入的时候弹出问题.出现“用户账户限制”或“未授予用户在计算机上的请求登陆类型”的问题,这说明我们的局域网和网络是畅通的,问题的根源就在电脑的安全设置上. ...

  2. openshift 容器云从入门到崩溃之十《容器监控-数据展示》

    POD资源历史曲线(CPU.内存.网络) 监控方案heapster+hawkular-metrics+hawkular-cassandra heapster负责收集数据 hawkular-cassan ...

  3. selenium case报错重新执行

    在做web ui自动化的过程中,经常发现这样一种情况,执行时case报错啦,再重新执行一遍又成功了. 如果不解决这个问题,脚本稳定性就会变差,很让人蛋疼,怎么解决呢: 思路: 写一个装饰器,装饰在ca ...

  4. Python自然语言处理笔记【二】文本分类之监督式分类的细节问题

    一.选择正确的特征 1.建立分类器的工作中如何选择相关特征,并且为其编码来表示这些特征是首要问题. 2.特征提取,要避免过拟合或者欠拟合 过拟合,是提供的特征太多,使得算法高度依赖训练数据的特性,而对 ...

  5. linux 安装nginx+php+mysql

    http://www.cnblogs.com/kyuang/p/6801942.htmlnginx安装 本文是介绍使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库 ...

  6. weex安装失败，按照官网步骤多次失败后成功

    在安装Weex Toolkit之前,需要确保安装了node, npm. yangfeifei:~ yff$ node -v v6.10.2 yangfeifei:~ yff$ npm -v 3.10. ...

  7. #map+LCA# Codeforces Round #362 (Div. 2)-C. Lorenzo Von Matterhorn

    2018-03-16 http://codeforces.com/problemset/problem/697/C C. Lorenzo Von Matterhorn time limit per t ...

  8. .NET ActiveMQ类库

    ActiveMQ .NET类库 ActiveMQ是一种开源的,实现了JMS规范的,面向消息(MOM)的中间件,为应用程序提供高效的.可扩展的.稳定的和安全的企业级消息通信. 0. 准备 使用Nuget ...

  9. Docker入门 配置篇

    docker配置 http://www.runoob.com/docker/docker-tutorial.html

  10. Signal in unit is connected to following multiple drivers VHDL

    参考链接 https://blog.csdn.net/jbb0523/article/details/6946899 出错原因 两个Process都对LDS_temp进行了赋值,万一在某个时刻,在两个 ...