解决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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
actionscript与javascript的区别
May 25 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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/06 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
详解JavaScript树结构
2017/01/09 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
关于vue面试题汇总
2018/03/20 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python通过链接抓取网站详解
2019/11/20 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
小学班主任培训方案
2014/06/04 职场文书
前台文员岗位职责
2015/02/04 职场文书
幼师大班个人总结
2015/02/13 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
运动会观后感
2015/06/09 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
HttpClient实现文件上传功能
2022/08/14 Java/Android