Computed 属性依赖于另一个 computed 属性

Question

下面的代码产生错误 "Cannot read property 'form' of undefined":

computed: {
  boundary_limits () {
    return this.$refs.hemoBoundaryLimits.form;
  },
  high_risk_alerts () {
    return this.$refs.highRiskAlerts.form;
  },
  alerts () {
    return {
      boundary_limits: this.boundary_limits,
      high_risk_alerts: this.high_risk_alerts
    }
  }
}

然而，如果我删除 alerts()，我不会收到任何错误，我什至可以控制台记录 boundary_limits 或 high_risk_alerts 成功，这意味着 $refs.hemoBoundaryLimits 和 this.$refs.highRiskAlerts 是定义。

所以 Vue.js 我对 alerts 的定义有问题，但我看不出有什么问题。

有什么线索吗？

Answer 1

错误出现是因为您试图访问计算属性中的 $refs。计算属性在安装模板之前进行评估，因此 hemoBoundaryLimits 是 undefined.

您应该在安装的挂钩中访问 $refs。

作为解决方案，您可以通过使用 @hook 事件知道何时安装组件来欺骗它：

<hemoBoundaryLimits @hook:mounted="isHemoBoundaryLimitsMounted = true" />

并在脚本中

data: () => ({
  isHemoBoundaryLimitsMounted: false
}),

computed: {
  boundary_limits () {
    if (!this.isHemoBoundaryLimitsMounted) return
    return this.$refs.hemoBoundaryLimits.form;
  }
}

Computed 属性依赖于另一个 computed 属性

Computed property that depends on another computed property

vue.js

computed-properties

Computed 属性 依赖于另一个 computed 属性

Computed property that depends on another computed property

vue.js

computed-properties

Computed 属性依赖于另一个 computed 属性