解决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中的对象化编程
Jan 16 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
jQuery 常见小例汇总
Dec 14 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基础知识:函数基础知识
2006/12/13 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
javascript 写类方式之二
2009/07/05 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
JSONP基础知识详解
2017/03/19 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python解惑之整数比较详解
2017/04/24 Python
python3设计模式之简单工厂模式
2017/10/17 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
python3人脸识别的两种方法
2019/04/25 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python Gabor滤波器讲解
2020/10/26 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
材料采购员岗位职责
2013/12/17 职场文书
学校卫生检查制度
2014/02/03 职场文书
审计专业自荐信范文
2014/04/21 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
旷课检讨书
2015/01/26 职场文书
趣味运动会赞词
2015/07/22 职场文书
队列队形口号
2015/12/25 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python