亲宝软件园·资讯

展开

vue数组双向绑定及$set用法

吃喽喽 人气:0

vue数组双向绑定问题及$set用法

在vue开发中,我们有时会遇到数据更新视图不更新问题,地址没有改变,vue就监测不到数据变化。这个时候,双向绑定就失效了。

以下这几种情况,Vue都会检测不到数据的变化

当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue

当你修改数组的长度时,例如:vm.items.length = newLength

由于 JavaScript 的限制,Vue不能检测对象属性的添加或删除

数组实现响应式的七个方法

删除:两个参数,splice(index,num) 删除的第一项的位置以及要删除的项数

添加:三个参数,插入起始位置、删除的项数(为0)、插入的项,向指定位置插入任意数量的项。arr.splice(1,0,"or","ue")

替换:先删除再添加,三个参数:起始位置、删除的项数、要添加的项数。添加的与删除的数量不一定要一致。arr.splice(1,2,"or","ue")

    sortNumber(a,b){
          return a-b
    };

上面的方法把原数组更改掉,可以选用这些方法来实现响应式。

flter()、concat() 和 slice()。它们不会变更原始数组,而总是返回一个新数组。使用这些方法会造成数据双向绑定失效。

$set用法

当数据没有被双向绑定的时候,我们可以使用$set

this.$set(原数组, 索引值, 需要赋的值) 

vue中$set解决数据双向绑定

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

解决:用$set方法

当你修改数组的长度时,例如:vm.items.length = newLength

解决:vm.items.splice(newLength)

this.$set(Object, key, value)
//this.$set(this.list[i],"flag",true)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。 

加载全部内容

相关教程
猜你喜欢
用户评论