vue snippnets

一、更新数组和对象

官网link-数组更新检测/对象变更检测

this.$set(currentObj, 'selectOption', res[currentTable][currentKey])

this.$set(array, array.length, {
   id: this.ruleId++,
   leftValue: this.dmsObj.detailObj[dmsid].ruleLeft === 1 ? 1 : '>',
   rightValue: 0
})

二、watch obj

  watch: {
    dmsObj: {
      handler (newV, oldV) {
        this.indexList = {}
        let calNum = 0
        for (const key in this.dmsObj.detailObj) {
          if (this.dmsObj.detailObj[key]['showFlag']) {
            calNum += 1
            this.indexList[key] = calNum
          }
        }
        this.dmsObj.detailNum = calNum
      },
      deep: true
    }
  }

    'currentRecord.userType'(newV, oldV) {

      console.log('userType newV is ...', newV)

      if (this.pageMode === 'add') {

        this.localDmsData.base_info.res = []

        this.$forceUpdate()

      }

    },

三、深拷贝

      if (this.currentOpObj.mode === 'add') {
        if (this.currentOpObj.parent) {
          const tmpSet = {
            relation: 1,
            arr: [_.cloneDeep(modalData)]
          }
          // opArr.push(tmpSet)
          // this.localDmsData.baseInfo.arr = new Array(...opArr)

          // this.$set(this.localDmsData.baseInfo, 'arr', _.cloneDeep(opArr))
          this.$set(opArr, opArr.length, tmpSet)
       
        } else {
          const index = this.currentOpObj.baseInfoIndex
          opArr[index].arr.push(_.cloneDeep(modalData))
        }
      }