我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况：

1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到

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

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

    数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...

  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. SQL优化系列——索引

    索引可能是数据库中最被误解的主题,因为有很多方式让你糊涂索引如何工作,以及服务器如何使用它们.要正确设计索引,让索引在数据库服务器中满足以下三个重要目的:1,索引使服务器查找一组相邻行,而不是单独的行 ...

  2. 《Effective Java》笔记-服务提供者框架

    静态工厂方法返回的对象所属的类,在编写包含该静态工厂方法的类时可以不必存在.这种灵活的静态工厂方法构成了服务提供者框架(Service Provider Framework)的基础,例如JDBC AP ...

  3. [转][Centos]一、了解关机

    来自:https://blog.csdn.net/ronmy/article/details/79117390 Linux centos关机与重启命令详解与实战 Linux centos重启命令: 1 ...

  4. 使用Spring MockMVC对controller做单元测试(转)

    https://www.cnblogs.com/ylty/p/6420738.html 1.对单一controller做测试. import org.junit.Before; import org. ...

  5. [UE4]Set Array Elem

    用一个新元素替换数组中已有的元素. “Size to Fit”:true,表示如果index参数大于数组所有,将会自动扩展数组大小.

  6. es5中类与继承

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. Blob下载文件 & 模拟滚动条实现

    1.vue切换路由视图时,事件钩子顺序是 当前模块create-->上一个模块beforeDestroy-->当前模块mounted 因此注册全局事件(比如给window注册事件)应放在m ...

  8. python中转义符&str格式化

    转义字符: 1.将有意义的字符变的无意义 2.将无意义的字符变的有意义 语法: \ + 某个字符 \n, \r\n :    代表换行 \t :      代表一个缩进, (水平制表符) \r :   ...

  9. 关于HSTS

    HSTS(HTTP Strict Transport Security) 当用户在浏览器中输入一个域名,如果没有注明前缀(也就是没输入"http"的时候)的时候,浏览器会默认按照h ...

  10. 新的开始 接触ASP.NET Core跨平台的框架

    今天我刚学习了使用Visual Studio 2015新建了.NET Core项目写了一个小的CSHTML代码.按我的话说就是,把C#和HTML合起来使用了,写了一个简单的关于学生的“增” “删” “ ...