解决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传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
js电话号码验证方法
Sep 28 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
vue组件实例解析
Jan 10 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 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反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
react-router 路由切换动画的实现示例
2018/12/03 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
浅谈Django中view对数据库的调用方法
2019/07/18 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
python requests.get带header
2020/05/05 Python
python实现猜单词游戏
2020/05/22 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
销售经理岗位职责
2014/03/16 职场文书
生态养殖创业计划书
2014/05/06 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
2014教师年度工作总结
2014/11/10 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
Nginx配置使用详解
2022/07/07 Servers