How to recalculate the height of elements in a list without using refs?

Question

Vue.js

Is computed

sliderHeight() {
            return this.$refs.slide[this.sliderActive - 1].clientHeight
        }

It counts everything perfectly, shows the number in devtools. But I should try to display in the template

:style="{
                        left: sliderOffsetLeft,
                        height: sliderHeight + 'px'
                    }"

That gives errors.

I need to read the height of the elements and set the style on the block just this height, and also so that when the slider width changes, the value is also recalculated. the height changes. Computed considers everything, but it turns out that it cannot be output to the template. How to play this situation?

Answer 1

1. computedwill not be recalculated when updating refs or dom-values. It works with reactive data.
2. Refs are only available after the relevant items are loaded (obviously), and you seem to access them earlier.
Bottom line: remove this code from computedand place it in mounted, manually assigning values ​​to the variable in data. Don't forget to add default values, and also update them if necessary (by the resize event or something else that can affect these sizes).
PS In most cases, what you are trying to solve with such code is done in css.