vue 重塑数组之修改数组指定index的值操作


Posted in Javascript onAugust 09, 2020

如下所示:

vm.items[indexOfItem] = newValue

vue不能检测数组的变动

想要实现可以使用vue的set方法

this.$set(this.items,indexOfItem,newValue);

补充知识:vue中利用索引直接设置一个数组项,不能触发视图更新的问题

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

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

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

举个例子:

var vm = new Vue({
 data: {
  items: ['a', 'b', 'c']
 }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:

// Vue.set

Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice

vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题,你可以使用 splice:

vm.items.splice(newLength)

以上这篇vue 重塑数组之修改数组指定index的值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 #Javascript
bootstrap实现tab选项卡切换
Aug 09 #Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 #Javascript
js利用iframe实现选项卡效果
Aug 09 #Javascript
解决vue 退出动画无效的问题
Aug 09 #Javascript
在vue中使用console.log无效的解决
Aug 09 #Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 #Javascript
You might like
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python文件去除注释的方法
2015/05/25 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
yy结婚证婚词
2014/01/10 职场文书
授权委托书样本
2014/04/03 职场文书
庆六一开幕词
2015/01/29 职场文书
学期个人自我总结
2015/02/13 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang