a-cascader编辑绑定值数据变化,但页面dom不回显不更新问题($set用法)

问题:

编辑时,级联组件绑定数据变化,的dom不进行更新

原因:

引用值类型(对象或数组)动态添加或删除某一个属性值,需要使用this.$set 或者 Object.assign()===不然数据触发不到getter和setter。
(对from直接赋值不会影响dom更新,但是动态添加某一属性会影响)

深入理解响应式:

为data中的 updateForm 对象添加一个属性,需要用到this. s e t ( 删 除 t h i s . set(删除this. set(this.delete)
深入理解vue响应式
数据进行初始化时(data中),将property通过object.defineProperty绑定getter和setter,从而进行获取和改变渲染(setter触发会触发watcher)

  async created() {
    await this.getGoodsCatgoryList()
    // this.getGoodsList()
    // 编辑的话,获取id信息
    if (this.$route.params.id) {
      // 获取id商品信息
      const storageId = getDAes(this.$route.params.id)
      const { data: result } = await getStorageById({ storageId })
      // 重新赋值,以前的已经消失不存在了
      this.updateForm = result.data
      // 获取选择产品下拉框
      await this.getGoodsList(this.updateForm.categoryId)
      // 下拉框回显
      // this.updateForm.selectedGoodsCatgory = [this.updateForm.categoryId]
      // this.updateForm.selectedGoodsList = [this.updateForm.prodId]
      this.$set(this.updateForm, 'selectedGoodsCatgory', [this.updateForm.categoryId])
      this.$set(this.updateForm, 'selectedGoodsList', [this.updateForm.prodId])
      console.log(this.updateForm)

      // 获取销售价 结算价参数
      if (this.updateForm.salePriceType !== 0) {
        this.saleRadioInputForm[this.saleRadioInput[this.updateForm.salePriceType]] = this.updateForm.salePriceParam
      }
      if (this.updateForm.costPriceType !== 0 && this.updateForm.costPriceType !== 1) {
        this.costRadioInputForm[this.costRadioInput[this.updateForm.costPriceType]] = this.updateForm.costPriceParam
      }
    }
  },

总结:

data中初始化的数据响应式会影响dom更新,所以dom中凡是使用的数据都要在data中绑定。
如何数据变化dom不更新,说明有对data中对象添加或删除树形 / 数组用索引设置数组项 或 改变长度

(对from直接赋值不会影响dom更新,但是动态添加某一属性会影响)

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值