Vue 数组和对象更新,但是页面没有刷新的解决方式


Posted in Javascript onNovember 09, 2019

在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化。

<ul>
   <li v-for="(item,index) in todos" :key="index">{{item.name}}</li>
 </ul>
data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   todos: [{
    name: 'aa',
    age: 14
   }, {
    name: 'bb',
    age: 15
 
   }, {
    name: 'cc',
    age: 16
 
   }],
   obj: {name: 'lihui', age: 17}
  }
 },
methods: {
  changeTodos: function () {
   var _this = this
   _this.todos[0] = {
    name: 'zhangsan',
    age: 15
   }
   console.log(this.todos)
   /*
    this.$set(this.todos, 0, 'nn')
   this.$forceUpdate()
*/
  }

这种修改得方式,无法出发数组得set,导致页面得数据不会改变。

有三种解决方式。

一、使用全局得set方法。

this.$set(this.todos,0,{name: 'zhangsan',age: 15});或者对象this.$set(this.obj,'key',value);

二,强制更新

this.$forceUpdate()

以上这篇Vue 数组和对象更新,但是页面没有刷新的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 #Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 #Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 #Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 #Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 #Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 #Javascript
js实现的在本地预览图片功能示例
Nov 09 #Javascript
You might like
php cookis创建实现代码
2009/03/16 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
微信支付开发维权通知实例
2016/07/12 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
JS原型链怎么理解
2016/06/27 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
python对字典进行排序实例
2014/09/25 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
考博专家推荐信
2014/05/10 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
八一建军节主持词
2015/07/01 职场文书
教师节表彰会主持词
2015/07/06 职场文书