vue中this.$set用法举例

动态响应式数据

数据更新，视图没有更新的时候可以用Vue.set

• Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来
• a是要更改的数据 、 b是数据的第几项、 c是更改后的数据

用法1

• 树的插槽，移入显示，移除隐藏

  mouseenter(node, data) {
      this.$set(data, 'show', true)
    },
    mouseleave(data) {
      this.$set(data, 'show', false)
    },

用法2

• this.$set(this.loadData[index],'seen',true)
• this.$set(this.addFrom,‘project_id’,data.project_id)
• 1、data中定义this.addFrom，
• 2、this.addFrom中的字段，
• 3、设置的新值，从接口中获取的新值

用法3

computed: {
    // 计算数量和价值
    moneyComputed() {
      let totalNum = 0
      let totalAmt = 0
      if (this.assetTableData.length) {
        this.assetTableData.forEach(item => {
          totalNum += item.qty || 0
          totalAmt += item.cost || 0
        })
        //qty和cost都是this.formData对象里的字段，通过计算，将计算出来的值赋值给对象里的qty和cost
        this.$set(this.formData, 'qty', totalNum)
        this.$set(this.formData, 'cost', totalAmt)
      }
    },
  },