解决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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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读取数据库信息的几种方法
2008/05/24 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php不写闭合标签的好处
2014/03/04 PHP
JsDom 编程小结
2011/08/09 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
英语商务邀请函范文
2014/01/16 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
六五普法宣传标语
2014/10/06 职场文书
放假通知怎么写
2015/08/18 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
python实现进度条的多种实现
2021/04/29 Python
python 实现两个变量值进行交换的n种操作
2021/06/02 Python