Vue中数组赋值问题

出现的问题

昨天工作内遇到的问题，用输入arrList渲染了一个表格，修改了arrList，然而列表没有改变。 Vue 不是双向绑定吗？怎么回事？what's fuck 值变了? 列表没有变？？？

测试代码

    //Vue中列表渲染的数据是这样的,单价和数量renderData:[{perPrice: 1, number: 10},{perPrice: 1, number: 20},{perPrice: 1, number: 30},]
复制代码

  html 就不写了，反正就是列表渲染
复制代码

效果如下

我给还原按钮写了个事件，点击修改renderData

//还原按钮的点击事件
resetData(){this.renderData[0] = {perPrice: 1, number: 10}this.renderData.length = 1}
复制代码

点击还原，列表毫无反应，我明明改变了数组的值，还有他的长度。

解决

最后阅读了Vue的[官方文档](cn.vuejs.org/v2/guide/li…" 百度一下")，找到了答案由于 JavaScript 的限制，Vue 不能检测刚刚的数组修改操作

代码修改

//还原按钮的点击事件
resetData(){this.$set(this.renderData,0,{perPrice: 1, number: 10})this.renderData.splice(1)console.log(this.renderData);}
复制代码

效果如下

转载于:https://juejin.im/post/5c6666e6e51d457fce014cba

Vue中数组赋值问题相关推荐

VUE中数组赋值push与=的区别
最近做项目时(vue2.0)遇到此坑耗费不少时间,分享如下: data中定义初始结构: data:function(){ return { optionsArr: [{name ...
Vue中数组变动监听
Vue中数组变动监听 Vue的通过数据劫持的方式实现数据的双向绑定,即使用Object.defineProperty()来实现对属性的劫持,但是Object.defineProperty()中的set ...
vue中数组的七个响应式方法
vue中数组的七个响应式方法起因: 在使用vue实习中,通过数组的索引改变了数组中的值,测试时发现,更改成功了,但是试图无响应. 原因: *通过索引值修改数组元素,不是响应式方法* // 以下代 ...
java中数组赋值方法
Java中数组赋值方法,以及为什么不能使用a = b //这里定义两个长度相同的数组,其中数组二为空 int[] arr1 = new int[]{1,2,3,4,5,6,0,0,0,0}; int[ ...
Vue中数组push问题
最近在Vue框架中使用数组push遇到两个坑 1. 向数组中push后,无法获取到数组中的属性值数组赋值: ...... res.data.forEach((item,index) => { ...
java 数组批量赋值_JAVA中数组赋值问题
好久没有编程了,今天突然想写点程序,谁知道这个数组的赋值问题给难住了,忘了以前老师说过的,测试程序调用处理类时候,在主程序运行的空间之外又开辟了一块空间,等处理类处理完了后,在返回到主程序的运行空间. ...
Java中数组赋值0-99_Java 数组
数组对于每一门编辑应语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同. Java语言中提供的数组是用来存储固定大小的同类型元素. 你可以声明一个数组变量,如numbers[10 ...
vue中数组长度_如何在Vue.js中获取计算数组的长度
我使用的是一个计算方法,它检查用户是否单击了搜索输入,然后检查JSON文件,以将用户的查询与JSON文件中的字符串匹配.这是我当前的代码: computed: { filteredPrizesByQu ...
Vue中数组更新，达到更新数组的几种方法
最近面试问道和平时工作中用到:改变了数组内的值,但是页面没有重新渲染,今天记录下解决方法直接修改不生效,代码如下 <template><div><h2>数组展示: ...

Vue中数组赋值问题

出现的问题

测试代码

解决

代码修改

Vue中数组赋值问题相关推荐

最新文章

热门文章