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 相关文章推荐
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
微信小程序实现多图上传
Jun 19 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
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
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
分享一个asp.net pager分页控件
2012/01/04 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
python操作CouchDB的方法
2014/10/08 Python
小小聊天室Python代码实现
2016/08/17 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python3中eval函数用法使用简介
2019/08/02 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
python logging通过json文件配置的步骤
2020/04/27 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
学校领导班子对照检查材料
2014/08/28 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
地陪导游欢迎词
2015/01/26 职场文书
学校节水倡议书
2015/04/29 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技