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 相关文章推荐
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
javascript基本类型详解
Nov 28 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
Python 文件管理实例详解
2015/11/10 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python实现控制COM口的示例
2019/07/03 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
节约用水广告语60条
2019/11/14 职场文书