解决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下用gb2312编码解码实现方法
Dec 31 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
React forwardRef的使用方法及注意点
Jun 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 冒泡排序算法的实现代码
2010/08/08 PHP
PHP小教程之实现链表
2014/06/09 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
windows下安装python paramiko模块的代码
2013/02/10 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
基于python的Paxos算法实现
2019/07/03 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android