Dies ist das erste Mal, dass ich Vue verwende (v2, nicht v3) und ich habe versucht, Variablen innerhalb von Vorlagen (in Methoden definiert) zu verwenden.

Mein vereinfachter Code:

<template>
  <div class="container" @mouseover="isHovered = true" @mouseleave="isHovered = false">
    <div class="c-container">
      <div ref="topCContainerRef" class="top-c-container">
        <div
          :class="['top-c', ...]"
          :style="{ height: `${isHovered ? 0 : this.scaledHeight}` }" // <-- HERE I need `scaledHeight`
        >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scaleLinear } from 'd3-scale'

export default {
  name: 'MyComponent',
  components: {  },
  props: {
    ...,
    datum: {
      type: Number,
      required: true,
    },
    ...
  },
  data: function () {
    return {
      isHovered: false,
      scaledHeight: {},
    }
  },
  mounted() {
    this.matchHeight()
  },
  methods: {
    matchHeight() {
      const topCContainerHeight = this.$refs.topCContainerRef.clientHeight
      const heightScale = scaleLinear([0, 100], [20, topCContainerHeight])
      const scaledHeight = heightScale(this.datum)
      this.scaledHeight = scaledHeight // I want to use this value inside the template
    },
  },
}
</script>

Wie erhalte ich den Wert von scaledHeight im Vorlagenbereich?

Wenn ich this nicht verwende, erhalte ich den Fehler nicht, aber der Höhenwert ist immer 0, als ob this，我不会收到错误，但高度值始终为 0，就像 scaledHeight ignoriert würde.

Ich habe die Dokumentation gelesen, aber sie hat mir nicht geholfen