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 操作select相关方法函数
Dec 06 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
javascript cookies操作集合
2010/04/12 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
基于Python的接口测试框架实例
2016/11/04 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python 支持向量机分类器的实现
2020/01/15 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
Python执行时间的几种计算方法
2020/07/31 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
机关节能减排实施方案
2014/03/17 职场文书
期末考试复习计划
2015/01/19 职场文书
超市食品安全承诺书
2015/04/29 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
python中 Flask Web 表单的使用方法
2022/05/20 Python