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 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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
6种php上传图片重命名的方法实例
2013/11/04 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
React Form组件的实现封装杂谈
2018/05/07 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
python循环监控远程端口的方法
2015/03/14 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
内科护士实习自我鉴定
2013/10/17 职场文书
相亲大会策划方案
2014/06/05 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
廉洁自律个人总结
2015/02/14 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python