解决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中Promise的使用
Jun 24 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
layui表格分页 记录勾选的实例
Sep 02 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文件目录基础操作
2014/11/11 PHP
smarty内置函数section的用法
2015/01/22 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
js给selected添加options的方法
2015/05/06 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
房产销售经理职责
2013/12/20 职场文书
寄语十八大感言
2014/02/07 职场文书
如何写早恋检讨书
2014/09/10 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
预备党员自我评价范文
2015/03/04 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫