数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被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. selenium操作浏览器

    import org.openqa.selenium.WebDriver; import common.StartFireFox; public class TestBrowser { public ...

  2. java框架之Struts2(4)-拦截器&标签库

    拦截器 概述 Interceptor (拦截器):起到拦截客户端对 Action 请求的作用. Filter:过滤器,过滤客户端向服务器发送的请求. Interceptor:拦截器,拦截的是客户端对 ...

  3. kubectl批量删除pvc

    #!/bin/bashkubectl get pvc |grep hub > tmp.txtcat tmp.txt |awk '{split($0,a," ");print ...

  4. React时间组件（时分秒补0）页面全局引用

    1.common.js export function formatTime(data){ var d = new Date(data); function doTime(d){ if(d<10 ...

  5. 与数论的厮守02:整数的因子分解—Pollard_Rho

    学Pollard_Rho之前,你需要学会:Miller Rabin. 这是一个很高效的玄学算法,用来对大整数进行因数分解. 我们来分解n.若n是一个素数,那么就不需要分解了.所以我们还得能够判断一个数 ...

  6. poj3133 插头dp

    #include <iostream> #include <cstdio> #include <string.h> #include <vector> ...

  7. elasticsearch 安装 windows linux macOS

    导读 在上一章节我们介绍Elasticsearch基本概念,今天我们继续进行本章内容,Elasticsearch在各种环境下安装,下面将逐一讲解在各种操作系统或不同安装在不同环境中注意事项. 安装 E ...

  8. tiny6410采用sd卡烧写的问题

    今天想用32G的SD卡来烧写tiny6410的uboot但是失败了,换了一张4G的卡就可以了, 还有sd卡启动的uboot使用tftp命令是有问题的

  9. 校验input 修改当前值的校验获取值方式

    <input style="height: 18px; width: 90px;" name="nowQty" value="${ad.nowQ ...

  10. jupyter notebook新用法

    输入单词以后按下tab键以后 出现提示 a是个矩阵或者数组,a.flatten()就是把a降到一维,默认是按横的方向降>>> a = np.array([[1,2], [3,4]]) ...