解决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根据纬度经度查看地图处理程序
May 08 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
解决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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
vue实现购物车加减
2020/05/30 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
对python的文件内注释 help注释方法
2018/05/23 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
pygame实现五子棋游戏
2019/10/29 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Python可以实现栈的结构吗
2020/05/27 Python
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
环境工程毕业生自荐信
2013/11/17 职场文书
小学生学习感言
2014/03/10 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
争先创优心得体会
2014/09/12 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技