解决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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 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数据对象PDO操作技巧小结
2016/09/27 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Python语言描述最大连续子序列和
2017/12/05 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
PyTorch实现AlexNet示例
2020/01/14 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
外贸业务员岗位职责
2013/11/24 职场文书
美容师的职业规划书
2013/12/27 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
进口业务员岗位职责
2014/04/06 职场文书
意向书范本
2014/07/29 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
会议通知
2015/04/15 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS