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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
Javascript中的Split使用方法与技巧
Mar 09 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
JSONObject使用方法详解
Dec 17 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
Vue实现穿梭框效果
Sep 30 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
通过html表格发电子邮件
2006/10/09 PHP
BBS(php & mysql)完整版(三)
2006/10/09 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
jquery插件制作教程 txtHover
2012/08/17 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
python处理cookie详解
2014/02/07 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
C#面试题问题集
2016/04/02 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
Golang 结构体数据集合
2022/04/22 Golang