How does onMounted work in hidden elements?

Question

Vue.js

Actually there are several tabs. Only the active one is shown, the rest are hidden via display: none.

In one of the "tabs" there is a component in which the height of the blocks inside this tab is calculated in onMounted.

If this "tab" is initially hidden (display: none), then the height is always 0, and if it is active, then the height is calculated correctly.

How to fix it?

Answer 1

Because display: none takes up no space on the page. Try - visibility with value hidden. Then the element will be invisible, but it will have dimensions.