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 相关文章推荐
js Dialog 实践分享
Oct 22 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 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的安全
2006/10/09 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
Yii核心验证器api详解
2016/11/23 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python 多进程和数据传递的理解
2017/10/09 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
使用Django清空数据库并重新生成
2020/04/03 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
户外用品商店创业计划书
2014/01/29 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
保护环境倡议书500字
2014/05/19 职场文书
院系推荐意见
2015/06/05 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
MySQL查询学习之基础查询操作
2021/05/08 MySQL
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS