解决Vue 通过下表修改数组,页面不渲染的问题


Posted in Javascript onMarch 08, 2018

需要注意的是,Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是,对于数组元素的赋值,却没有办法直接监听,因此,如果我们直接对数组元素赋值:

vm.todos[0] = {
  name: 'New name',
  description: 'New description'
};

会导致Vue无法更新View。

正确的方法是不要对数组元素赋值,而是更新:

vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';

或者,通过splice()方法,删除某个元素后,再添加一个元素,达到“赋值”的效果:

var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);

Vue可以监听数组的splice、push、unshift等方法调用,所以,上述代码可以正确更新View。

解决Vue 通过下表修改数组,页面不渲染的问题

以上这篇解决Vue 通过下表修改数组,页面不渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 #Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 #Javascript
实战node静态文件服务器的示例代码
Mar 08 #Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 #Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 #Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 #Javascript
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
You might like
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python argparse模块应用实例解析
2019/11/15 Python
django 多数据库及分库实现方式
2020/04/01 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
幼儿园亲子活动方案
2014/01/29 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技