缺少检测何时显示特定 <v-stepper-content> 的事件？

Question

在 vuetify stepper 组件中，我嵌入了自己的 vue 组件。我想根据宽度定义 div 的高度，使其具有 "DIN A" sheet 的比例。问题：div的宽度在我的组件挂载时为0，我不知道什么时候重复测量。

我需要 div 的正确比例并且它应该是响应式的。如果我的 div 上下文显示后触发了一个事件，我就可以正确设置高度。

在父组件中：

<v-stepper-content step="4">
                <ad-preview></ad-preview>
...

child 组件的模板如下所示：

<template>
    <v-container fluid>
        <v-layout row wrap>
            <v-flex class="xs12 sm6" ref="cont">
                <div id="previewPdfContainer">
                </div>
            </v-flex>
            <v-flex class="xs12 sm6">
                <h3>Messages</h3>
                <v-btn @click="setContainerSizes">Test</v-btn>
            </v-flex>
        </v-layout>
    </v-container>
</template>

在脚本部分我定义了这些方法：

getWindowWidth() {
                this.containerWidth = this.$refs.cont.offsetWidth;
            },
setContainerSizes(){
                this.getWindowWidth();
                this.containerHeight = this.containerWidth * 1.414285714285714;                document.querySelector('#previewPdfContainer').style.width = this.containerWidth + "px";                document.querySelector('#previewPdfContainer').style.height = this.containerHeight + "px";
            }

在 mounted() 中我调用 "this.setContainerSizes()" - 但宽度为 0 因为 div 是 'invisible' 而组件已安装 !

为了测试我添加了"Test" 按钮的功能。当我单击按钮时，结果是正确的：div 的高度设置为正确的值。

我希望有一个计划好的解决方案，这样我就不必切换到使用 setInterval 或 vuex 的解决方法（'step' 属性的全局值）。

我很感激每一个线索。

Answer 1

我知道这是一种解决方法，但您可以检查 v-flex 的调整大小。类似于以下内容：

new ResizeObserver(setContainerSizes).observe(myVFlex)

缺少检测何时显示特定 <v-stepper-content> 的事件？

Missing event to detect when a specific <v-stepper-content> is shown?

vue.js

vuetify.js