如何获得 v-card-title vuetify 元素的高度？答案

【问题标题】：How can I get a hight of v-card-title vuetify element?如何获得 v-card-title vuetify 元素的高度？
【发布时间】：2020-11-17 16:20:56
【问题描述】：

我有以下代码，我想获取 v-card 标题元素的高度？

 <v-card-title class="purple lighten-2">
      <v-icon dark size="42" class="mr-4"> fas fa-egg </v-icon>
        <h3 class="white--text font-weight-medium flex-nowrap">
       {{ dishes[dishesIndexList[0]].dish_name }}
     </h3>
 </v-card-title>

我该怎么做？我尝试将 ref="cardTitleHeight" 添加到 v-card 标题，然后在安装元素时我可以得到 this.$refs 并且我添加的 cardTitleHeight ref 被列为 $refs 对象的一部分但是当我尝试使用它时this.$refs.cardTitleHeight 我未定义（我需要先获取此元素才能获取其高度）。我想这是因为 v-card-title 是一个外部组件。

如何获得 v-card-title 高度？我将不胜感激。

【问题讨论】：

标签： vue.js height vuetify.js

【解决方案1】：

你的问题有答案

当元素被挂载时

该元素的高度将在组件安装后定义。

您可以在脚本中尝试：

  mounted() {
    console.log(this.$refs.cardTitleHeight); //.style.height or lineHeight
  },

请注意，mounted 并不能保证所有子组件也已安装。如果你想等到整个视图被渲染，你可以在mounted中使用vm.$nextTick。

更多关于mounted life cycle hook。

【讨论】：