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 相关文章推荐
封装的原生javascript弹出层代码
Sep 24 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
js 获取时间间隔实现代码
May 12 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
JavaScript简单编程实例学习
Feb 14 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
php解析json数据实例
2014/08/19 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
jQuery事件对象总结
2016/10/17 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
安装Python的教程-Windows
2017/07/22 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
python实现会员管理系统
2022/03/18 Python
Python如何让字典保持有序排列
2022/04/29 Python