解决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 相关文章推荐
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 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
关于php开启错误提示的总结
2019/09/24 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
javascript数组详解
2014/10/22 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
微信小程序自动客服功能
2017/11/02 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
用Python shell简化开发
2018/08/08 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
python字符串反转的四种方法详解
2019/12/02 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
在python中修改.properties文件的操作
2020/04/08 Python
python如何求100以内的素数
2020/05/27 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
英文简历中的自荐信范文
2013/12/14 职场文书
安全教育心得体会
2013/12/29 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
大学生见习报告总结
2014/11/04 职场文书
获奖感言一句话
2015/07/31 职场文书
理解python中装饰器的作用
2021/07/21 Python