key值监听prop数据的变化

两笔数据设置的所有品牌,被设置过的不让再次设置,

el-cascader这里用的多选,已被选的数据被disabled掉

 

奥迪Q3已经被选,现在做个删除操作,props二级数据应该重新加载,删除后这个仍被禁用,但是打印出来的数据发生改变,可以用这个id的长度变化来重新加载

data 这里需要重新指向this,不然从接口返的数据赋值了goodId拿不到

propsGood: {
        lazy: true,
        checkStrictly: true,
        multiple: true,
        expandTrigger: 'hover',
        lazyLoad(node, resolve) {
          const { level, data } = node
          if (level === 0) {
            this.selectLoading = true
            const queryObj = {
              text: '',
              page: 1,
              rows: 20
            }
            getDataVehicle(queryObj, 'brand').then((res) => {
              if (res.data) {
                const data = res.data
                const tempData = []
                data.map((e) => {
                  const objStr = {
                    lid: e.id,
                    value: e.vehicleBrand,
                    label: e.vehicleBrand,
                    disabled: true,
                    leaf: level >= 2
                  }
                  tempData.push(objStr)
                })
                resolve(tempData)
                // this.brandList = tempData
                this.selectLoading = false
              }
            })
          } else {
            this.selectLoading = true
            const queryObj = {
              text: '',
              pid: data.lid,
              page: 1,
              rows: 20
            }
            getDataVehicle(queryObj, 'type').then((res) => {
              if (res.data) {
                const data = res.data
                const tempData = []
                let objStr = {}
                data.map((e) => {
                  let disabledIt = false
                  if (that.goodId.indexOf(e.id) !== -1) {
                    disabledIt = true
                  }
                  objStr = {
                    lid: e.id,
                    value: `${e.id}-${e.vehicleType}`,
                    label: e.vehicleType,
                    disabled: disabledIt,
                    leaf: true
                  }
                  tempData.push(objStr)
                })
                resolve(tempData)
              }
            })
          }
        }
      },

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue2.0中,使用`watch`来观察`prop`的变化时,有几种情况可能会导致不触发`watch`的回调函数。 首先,需要确保正确设置了要观察的`prop`。`props`是父组件传递给子组件的属性,子组件通过`props`选项来接收这些属性。在Vue2.0中,`props`是用于接收数据的,而不是直接在子组件中定义和修改数据。当接收的`prop`在数据发生变化时,`watch`会触发回调函数。如果没有正确设置`props`选项或没有正确传递`prop`给子组件,`watch`就无法感知到`prop`的变化。 其次,需要注意`watch`选项的写法。`watch`选项是一个对象,包含一个或多个属性,每个属性的 key 是要观察的`prop`的名称,value 是回调函数,在`prop`发生变化时调用。在定义`watch`时,需要注意`prop`的命名和大小写是否和实际使用的`prop`一致,如果不一致,`watch`无法监听到`prop`的变化。 最后,还有一种情况是`watch`选项的写法不正确。在Vue中,`watch`选项可以直接定义为一个函数,也可以定义为一个对象,对象中的每个属性都是要观察的`prop`,而则是一个函数。如果定义为函数,函数的参数是要观察的`prop`的新和旧。如果定义为对象,需要确保每个属性都是要观察的`prop`的名称,并且对应的是一个函数。 综上所述,如果`watch`无法触发,应该检查是否正确设置了`props`选项和传递`prop`给子组件,是否正确定义了`watch`选项的写法,以及是否确保命名和大小写的准确性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值