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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
js+canvas实现五子棋小游戏
Aug 02 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递归列出所有文件和目录的代码
2008/09/10 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
理解JS事件循环
2016/01/07 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
react-native 封装选择弹出框示例(试用ios&android)
2017/07/11 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
Python selenium抓取微博内容的示例代码
2018/05/17 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python实现名片管理系统项目
2019/04/26 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
python中wx模块的具体使用方法
2020/05/15 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
关于.NET, HTML的五个问题
2012/08/29 面试题
2013年大学生的自我鉴定
2013/10/24 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
党务公开方案
2014/05/06 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
2015年安全生产责任书
2015/01/30 职场文书
手写实现JS中的new
2021/11/07 Javascript
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis