I am struggling with setting the same height for a div containing Component2 as another div (modelDiv) containing Component1.
<template>
<div>
<div v-if="showMe">
<div ref="modelDiv">
<Component1/>
</div>
</div>
<div v-else>
<div :style="setDivHeight">
<Component2/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
displayMe: true,
elementHeight: null,
}
},
computed: {
showMe() {
return this.displayMe
},
setDivHeight() {
return `height: ${this.elementHeight}px;`
},
},
mounted() {
this.$nextTick(() => {
if(this.$refs.modelDiv) {
this.elementHeight = this.$refs.modelDiv[0].$el.clientHeight
} else {
console.log('the height', this.$refs)
}
})
},
}
</script>
Currently, I am encountering an error message:
TypeError: Cannot read properties of undefined (reading '$el')console.log('the height', this.$refs)modelDiv: undefined. I would appreciate any assistance in resolving this issue. Thank you.