菜是原罪,今天下午写购物车模块的时候,后端心善,没有让我用cookie来保存用户加入购物车的商品,然后调的接口,把用户加入购物车的商品数据保存到数据库里面。然后在购物车页面调获取购物车列表。好吧,这都不是重点,重点是我菜。。。
在用v-for把购物车列表渲染完之后,写点击是否勾选商品的时候,不管我怎么骚操作,数据都是无法更新到视图,在我心里,vue是前端三大至高神之首,它是神圣的,它是无敌的,它是崇高的,它是不可战胜的!!没错。一定是我自己的问题,因为写代码时候一直满脑子骚操作,把购物车页面拆分成5个页面来写的原因,我猜肯定是我某个组件传值有问题。。。一个小时过去了。。。根本找不出来问题!!!
绝望的菜鸡我根本不知道哪个地方有问题。。最后大致猜出可能是数组有问题。然后就找到了以前文档。。啊啊啊,写了半年vue才知道vue的数组不能直接修改的同时视图发生变化,那些可以发生变化的方法是被重写的。。
当然,vue为我们重写了部分数组方法,使用这些方法时,当数据发生改变时,视图也会更新:
push() 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
pop() 数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。
shift() 删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。
unshift() 将参数添加到原数组开头,并返回数组的长度 。
splice() 很强大的数组方法,它有很多种用法,可以实现删除、插入和替换。
sort() 按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。
reverse() 反转数组项的顺序。
数据发生变化,页面不能随着更新的方法:
filter() “过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。
concat() 将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。
slice() 返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。
什么情况下不能更新视图:
我的解决方法:
Vue.set( target, key, value )
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据(数组索引)
value :重新赋的值