[Vuejs]-Returned Value From Computed Property Doesn't Change When It's Used In Template (Vue3 without Composition API)

by

0👍

UPDATED, sorry I fixed a few script errors, I think it should be good now, let me know if you still have issues.

=========

Maybe try a different approach like this, I just hand coded it, you may double check for typos etc.

<div class="wrapper">
  <fieldset>
    <legend :style="`--gap:${legendGap}px`"></legend>
  </fieldset>
  <label ref="label">{{ label }}</label>
  <input/>
</div>

data() {
  return {
    legendGap: 0
  }
},
watch: {
  label() {
    this.calcLegendGap()
  }
},
mounted() {
  // needed to set the init value after all rendered
  this.calcLegendGap()
},
methods: {
  calcLegendGap() {
    if (
      !this.label ||
      this.design !== 'outlined' ||
      !this.options.some((x) => ['has-placeholder', 'is-dirty', 'is-focused'].includes(x))
    ) {
      this.legendGap = 0;
    } else {
      // $nextTick is required we need to wait for DOM update
      this.$nextTick(() => {
        this.legendGap = parseFloat(
          window.getComputedStyle(this.$refs.label).getPropertyValue('width')
        ) * 0.8;
      });
    }
  }
}

Leave a comment