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技术实现Tab页界面之二
Sep 21 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
使用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水印技术
2007/02/14 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
sae使用smarty模板的方法
2013/12/17 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
php实现搜索类封装示例
2016/03/31 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
Highcharts入门之简介
2016/08/02 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
跟老齐学Python之类的细节
2014/10/13 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python 序列的方法总结
2016/10/18 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
django fernet fields字段加密实践详解
2019/08/12 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
18岁生日感言
2014/01/12 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
低碳环保口号
2014/06/12 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
高三教师工作总结2015
2015/07/21 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript