Utiliser des variables définies dans des méthodes dans des modèles

Question

C'est la première fois que j'utilise Vue (v2 et non v3) et j'ai essayé d'utiliser des variables dans des modèles (définis dans des méthodes).

Mon code simplifié :

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

Comment obtenir la valeur de scaledHeight dans la section modèle ?

Si je n'utilise pas this, je n'obtiens pas d'erreur, mais la valeur de hauteur est toujours 0, comme si this，我不会收到错误，但高度值始终为 0，就像 scaledHeight était ignoré.

J'ai lu la documentation mais cela ne m'a pas aidé

Answer 1

J'ai rencontré et résolu ce problème aujourd'hui. Vous pouvez changer le style comme ci-dessous.

Cela fonctionne très bien pour moi, j'espère que cela vous aidera~~

Answer 2

Utiliser compulatedRéparer

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