美文网首页
vue改变数组中的某一个值,触发双向绑定

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

作者: coderfl | 来源:发表于2022-03-03 14:32 被阅读0次

    一、使用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)
      }
    

    相关文章

      网友评论

          本文标题:vue改变数组中的某一个值,触发双向绑定

          本文链接:https://www.haomeiwen.com/subject/hzzyrrtx.html