[Vuejs]-Computed property that depends on another computed property

by

0👍

✅

The error comes because you are trying to access $refs in computed property.
Computed properties are evaluated before the template is mounted and thus the hemoBoundaryLimits is undefined.

You should access $refs in the mounted hook.

As solution, you can trick it by knowing when the component is mounted using @hook event:

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

And in the script

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

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

Leave a comment