2020-08-27 Vue 操作嵌套数组 数据与视图不同步

2020-08-27  本文已影响0人  jinya2437

上移 下移操作,改变数组下标,可为什么视图上面的数据位置没有变化...

      //上移
      moveUpFn(index,subIndex,item) {
        let current = item.questionList[subIndex]
        let target = item.questionList[subIndex-1]
        this.questionTypeList[index].questionList[subIndex-1] = current
        this.questionTypeList[index].questionList[subIndex] = target
      },
      //下移
      moveDownFn(index,subIndex,item) {
        let current = item.questionList[subIndex]
        let target = item.questionList[subIndex+1]
        this.questionTypeList[index].questionList[subIndex] = target
        this.questionTypeList[index].questionList[subIndex+1] = current
      },

明明了解Vue对数组封装的函数就那么几个(响应式:数据变→视图变)
push pop shift unshift splice sort reverse ;因此,改变数组下标,视图不会更新

解决办法

      // 触发Vue同步数据显示视图
      vueUpdate() {
        for (let i = 0; i < this.questionTypeList.length; i++) {
          let item = this.questionTypeList[i]
          for (let j = 0; j < item.questionList.length; j++) {
            let subItem = item.questionList[j]
            // 参数:数组对象 --下标--对象
            Vue.set(item.questionList,j,subItem)
          }
          // 参数:数组对象 --下标--对象
          Vue.set(this.questionTypeList,i,item)
        }
      },
      //上移
      moveUpFn(index,subIndex,item) {
        let current = item.questionList[subIndex]
        let target = item.questionList[subIndex-1]
        this.questionTypeList[index].questionList[subIndex-1] = current
        this.questionTypeList[index].questionList[subIndex] = target
        this.vueUpdate()
      },
      //下移
      moveDownFn(index,subIndex,item) {
        let current = item.questionList[subIndex]
        let target = item.questionList[subIndex+1]
        this.questionTypeList[index].questionList[subIndex] = target
        this.questionTypeList[index].questionList[subIndex+1] = current
        this.vueUpdate()
      }
上一篇 下一篇

猜你喜欢

热点阅读