Menggunakan pembolehubah yang ditakrifkan dalam kaedah dalam templat

Question

Ini adalah kali pertama saya menggunakan Vue (v2 bukan v3) dan saya telah cuba menggunakan pembolehubah di dalam templat (kaedah dalam yang ditentukan).

Kod ringkas saya:

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

Bagaimana untuk mendapatkan nilai scaledHeight di bahagian templat?

Jika saya tidak menggunakan ini, saya tidak mendapat ralat, tetapi nilai ketinggian sentiasa 0, seolah-olah this，我不会收到错误，但高度值始终为 0，就像 scaledHeight diabaikan.

Saya membaca dokumentasi tetapi ia tidak membantu saya

Answer 1

Saya menghadapi dan menyelesaikan masalah ini hari ini. Anda boleh menukar gaya seperti di bawah.

Ia berfungsi dengan baik untuk saya, saya harap ia membantu anda~~

Answer 2

Guna compulated Baiki

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)
    },
  },