vue改变数组中的某一个值,触发双向绑定

2022-03-03  本文已影响0人  coderfl

一、使用push、pop、shift、unshift、splice、sort和reverse会改变原数组的操做,VUE能正常检测到数组变化而更新视图。
二、使用filter、concat、slice这几种方法操做数组,并不会改变原数组,VUE天然不会检测到数据变化也不会去更新视图。
三、使用下标方式(number[0] = x)、直接修改数组长度number.length = 1这两种方式虽然改变了原数组,但此时VUE检测不到数组变化,也不会更新视图。

对于第3种特殊的状况,若是就有经过下标去改变数组的需求怎么办呢?

1,深拷贝

data() {
    return {
      key: [1,2,3,4,5]
    }
  },
  mounted() {
    this.key[0] = 6
    this.key = JSON.parse(JSON.stringify(this.key))
  }

2,vue自己的set方法

data() {
    return {
      key: [1,2,3,4,5]
    }
  },
  mounted() {
    this.$set(this.key,0,6)
  }
上一篇下一篇

猜你喜欢

热点阅读