解决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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 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 字符转义 注意事项
2009/05/27 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
文本加密解密
2006/06/23 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python中添加模块导入路径的方法
2021/02/03 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
财务管理个人自荐书范文
2013/11/24 职场文书
单位消防安全制度
2014/01/12 职场文书
食堂个人先进事迹
2014/01/22 职场文书
九年级英语教学反思
2014/01/31 职场文书
5s标语大全
2014/06/23 职场文书
相亲活动方案
2014/08/26 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
大学生自荐材料范文
2014/12/30 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang