Вычисляемое свойство, которое зависит от другого вычисляемого свойства

Question

Приведенный ниже код выдает ошибку «Невозможно прочитать свойство 'форма' из неопределенного»:

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;
  }
}