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

Question

Inside a vuetify stepper component I embed my own vue component. I want to define the height of a div depending on its width so that it has the proportions of a "DIN A" sheet. Problem: The width of the div is 0 when my component is mounted and I don't know when to repeat the measurement.

I need to have the correct proportion of the div and it should be responsive. If I had an event that is fired after the context of my div is shown, I could set the height correctly.

In the parent component:

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

The template of the child component looks like this:

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

In the script section I defined these methods:

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";
            }

and in mounted() I call "this.setContainerSizes()" - but the width is 0 because the div is 'invisible' while the component is mounted!

To test the function I included the "Test" button. When I click the button the result is correct: the height of the div is set to the correct value.

I hope there is a planned solution so that I don't have to switch to workarounds with setInterval or via vuex (global value for the 'step' attribute).

I'm grateful for every clue.

What about asking for this in vuetify's github? github.com/vuetifyjs/vuetify/issues — JoaoRibeiro
Watching the step value does not work, because there is a transition on step changing, and the step value changes before the transition is done, which means the new step content is still not displayed (width is 0). — JoaoRibeiro

JoaoRibeiro JoaoRibeiro · Accepted Answer · 2019-02-28T11:48:30

I know this is a workaround, but you can check for the resize of your v-flex. Something like the following:

new ResizeObserver(setContainerSizes).observe(myVFlex)

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

1 Answers