账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue中watch computed属性,会有冲突吗?
    39
    0

    今天用了升级vux到2.7.5,发现里边的previewer组件有bug,点击图片查看放大图片,会提示Cannot read property 'w' of undefined错误,看了里边的实现,发现watch了computed属性imgs,imgs只返回了个空数组。

    computed: {

    imgs () {
      return this.list.map(one => {
        if (!one.msrc) {
          one.msrc = one.src
        }
        if (typeof one.w === 'undefined') {
          one.w = 0
          one.h = 0
        }
        return one
      })
    }

    },
    watch: {

    imgs (newVal, oldVal) {
      if (!this.photoswipe) {
        return
      }
      if (newVal.length && newVal.length - oldVal.length === -1) {
        const index = this.photoswipe.getCurrentIndex()
        this.photoswipe.invalidateCurrItems()
        this.photoswipe.items.splice(index, 1)
        let goToIndex = index
        if (goToIndex > this.photoswipe.items.length - 1) {
          goToIndex = 0
        }
        this.photoswipe.goTo(goToIndex)
        this.photoswipe.updateSize(true)
        this.photoswipe.ui.update()
      } else if (!newVal.length) {
        this.close()
      }
    }

    }

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 在Vue中,当组件的数据属性被触发改变时,会触发相应的计算属性,这时可能会发生计算属性与已有的计算属性的冲突。为了解决这个问题,Vue提供了watchchange指令,它们可以帮助你监视数据属性的变化,并在改变时触发相应的计算属性。

      例如,你可以使用watch指令监视一个value属性:

      ```javascript

      ```

      在这个例子中,value属性的值会触发value计算属性的更新,并在变化时打印新的value值。

      如果你想要解决计算属性与已有的计算属性的冲突,你可以使用change指令,它会监视一个value属性的改变:

      ```javascript

      ```

      在这个例子中,value属性的值会触发value计算属性的更新,并在变化时打印新的value值。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部