使用在模板内的方法中定义的变量

Question

这是我第一次使用 Vue（v2 而不是 v3），我一直在尝试在模板中使用变量（在方法中定义）。

我的简化代码：

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

如何在模板部分中获取 scaledHeight 的值？

如果我没有使用 this，我不会收到任何错误，但高度值始终为 0，例如 scaledHeight 被忽略..

我阅读了文档，但对我没有帮助

Answer 1

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

<div
    :class="['top-c', ...]"
    :style="{ height: isHovered ? 0 : scaledHeight }" 
>

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

Answer 2

已使用 computed

修复

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

使用在模板内的方法中定义的变量

Use a variable defined in a method inside the template

javascript

vue.js

vuejs2