Inactive tabs' mounted method not working correctly.
Closed this issue · 3 comments
When tabs panel is shown, it seems all tabs' components are loaded. But only active tab's component mounted correctly. It can get other elements' height value for other calculation.
But inactive tabs' components couldn't get some element's height value when they are mounted.
Hello,
please add some code example of what is the issue, I struggle to understand it from your description.
app:
<tab style="height: 100%;" id="Editing" name="Editing" > <Editing /> </tab> <tab id="Comments" name="Comments" style="width: 100%; height: 100%;" > <comments> </comments> </tab>
comments:
<template <v-list class="text-left comment-list" ref="commentList"> </template>
<script> mounted() { this.$nextTick(function () { let divStyle = getComputedStyle(this.commentHeader); this.commentsHeaderHeight = parseFloat(divStyle.height); console.log('comment header height', this.commentsHeaderHeight); }); } </script>
If comments tab is not active at first, value of this.commentsHeaderHeight will be NaN. Then a scrollbar will not be shown for a long list.
The work around will be adding this "v-if="detailTabActive == '#Comments'" to the tab's child element. That will make the correct element height returned.
Hello,
the component uses the v-show directive, which sets a non-active tab as display: none;.
This behaviour causes the browser to calculate the element's height & width as 0.
I don't really intend to change this behaviour, as the component would then work a different way.