解决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单词形式的运算符
May 06 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
vue-router源码之history类的浅析
May 21 Javascript
vue实现固定位置显示功能
May 30 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 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扩展开发经验分享
2012/09/06 PHP
浅析php header 跳转
2013/06/17 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
php实现计数器方法小结
2015/01/05 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
数组越界问题
2015/10/21 面试题
历史专业个人求职信范文
2013/12/07 职场文书
旅游项目开发策划书
2014/01/18 职场文书
财务总经理岗位职责
2014/02/16 职场文书
政府门卫岗位职责
2014/04/29 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫