I am working on a component that requires an array of 50 objects to be passed as a prop.
<template>
<div v-for="(item,index) in items" ref="items" :key="index"gt;
//
</div>
</template>
props: {
items: {
type: Array,
required: true,
},
}
To check the offsetHeight of each item in the prop items, I created a computed property. Initially, I retrieved all the items using their ref and returned them as is.
computed: {
allItems() {
const all = this.$refs.items;
return all;
}
}
When inspected in VueTools, the computed property correctly displays an array of HTMLDivElement's. However, when I attempted to filter out items based on their offsetHeight:
computed: {
allItems() {
const all = this.$refs.items;
return all.filter(x => {
x.offsetHeight > 300;
})
}
}
The computed property now shows only "15" instead of the expected values. Even after changing the window height, the displayed offsetHeight values do not update accordingly. Shouldn't the computed property continuously reflect the current values?