Verwenden von Variablen, die in Methoden in Vorlagen definiert sind

Question

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

Answer 1

我今天遇到并解决了这个问题。 您可以像下面这样更改样式。

对我来说效果很好，希望对你有帮助~~

Answer 2

使用 compulated 修复

computed: {
    computedHeight: function () {
      return this.isHovered ? 0 : this.matchHeight()
    },
},
methods: {
    matchHeight() {
      const topCContainerHeight = this.$refs.topCContainerRef.clientHeight
      const heightScale = scaleLinear([0, 100], [20, topCContainerHeight])
      return heightScale(this.datum)
    },
  },