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


Posted in Javascript onAugust 27, 2018

我们有时候常碰到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中修改了数据但视图无法更新的情况

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

以上Vue 不能检测数据变动的数组的2种方式解决办法

将代码中的add()方法改为:

add(){
  // this.gc[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到
  Vue.set(this.gc,0,{name:'lisi',age:22}) //这样就能被vue监控到,更新视图    
 }

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

以上这篇解决vue中修改了数据但视图无法更新的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
javascript数组排序汇总
Jul 07 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 #Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 #Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 #Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 #Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 #Javascript
JS常见构造模式实例对比分析
Aug 27 #Javascript
Vue.js图片预览插件使用详解
Aug 27 #Javascript
You might like
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
Vue实现多标签选择器
2019/11/28 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
原生js实现日历效果
2020/03/02 Javascript
python使用PyGame模块播放声音的方法
2015/05/20 Python
用Python读取几十万行文本数据
2018/12/24 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
如何提高JDBC的性能
2013/04/30 面试题
传播学毕业生求职信
2013/10/11 职场文书
物业管理个人自我评价
2013/11/08 职场文书
国税会议欢迎词
2014/01/16 职场文书
九年级物理教学反思
2014/01/29 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
导游词之凤凰古城
2019/10/22 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android