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 相关文章推荐
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
解决Extjs下拉框不显示的问题
Jun 21 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 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结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python实现计算最小编辑距离
2016/03/17 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
python3实现弹弹球小游戏
2019/11/25 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
python两个list[]相加的实现方法
2020/09/23 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
英国儿童图书网站:Scholastic
2017/03/26 全球购物
中式餐厅创业计划书范文
2014/01/23 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电