Vue响应式添加、修改数组和对象的值


Posted in Javascript onMarch 20, 2017

有些时候,不得不想添加、修改数组和对象的值,但是直接添加、修改后又失去了getter、setter。

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

1. 利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue

2. 修改数组的长度时,例如: vm.items.length = newLength

为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状态更新:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)

避免第二种情况,使用 splice:

example1.items.splice(newLength)

 Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:

Vue.set(vm.someObject, 'b', 2)

您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

this.$set(this.someObject,'b',2)

有时你想向已有对象上添加一些属性,例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是,添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
this.someObject = _.extend({ a: 1, b: 2 }, this.someObject)

示例代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 
 <div id="app">
 <ol>
 <li v-for="data in list">{{data.id}} - {{data.name}}</li>
 </ol>
 </div>


 <script type="text/javascript" src="../underscore/underscore-min.js"></script>
 <script type="text/javascript" src="./vue.2.1.8.min.js"></script>
 <script type="text/javascript">
 var oVue = new Vue({
 el : '#app',
 data : {
 list : [
  {id : 5},
  {id : 6}
 ]
 }
 });
 </script>
</body>
</html>

Vue响应式添加、修改数组和对象的值

以上就是VueI添加修改数组与对象值时同时将触发状态更新的方法,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 关于# 和 void的区别分析
Oct 26 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
vue构建动态表单的方法示例
Sep 22 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 #Javascript
Vue指令的钩子函数使用方法
Mar 20 #Javascript
非常实用的vue导航钩子
Mar 20 #Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 #Javascript
如何解决vue与传统jquery插件冲突
Mar 20 #Javascript
Vue.js路由vue-router使用方法详解
Mar 20 #Javascript
Vue插件写、用详解(附demo)
Mar 20 #Javascript
You might like
PHP实现的装箱算法示例
2018/06/23 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python numpy 常用函数总结
2017/12/07 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
销售人员中英文自荐信
2013/09/22 职场文书
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
公务员个人自我评价分享
2013/11/06 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
农村改厕实施方案
2014/03/22 职场文书
大学生赌博检讨书
2014/09/22 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js