Vue: Computed properties to check offsetHeight of elements not updating-CodePudding

I have a component that takes an array of 50 objects.

<template>
   <div v-for="(item,index) in items" ref="items" :key="index">
      //
   </div>

</template>

props: {
    items: {
      type: Array,
      required: true,
    },
}

I want to have the prop items checked for their offsetHeight so I made a computed property, grabbed the items by their ref and first tested it by returning just that.

computed: {
  allItems() {
    const all = this.$refs.items;
    return all;
  }
}

in VueTools , this shows an array of HTMLDivElement's and works as expected if I use allItems in place of items in the template.

now I want to implement the check for offsetHeight:

computed: {
  allItems() {
    const all = this.$refs.items;
    return all.filter(x => {
       x.offsetHeight > 300;
    })
  }
}

but this shows the computed property now as 15 so it filtered them but when I change the window height, the offsetHeight in the UI change but the computed property shows 15 regardless. Shouldn't this continuously show the current values?

CodePudding user response：

Shouldn't this continuously show the current values?

No, because HTMLElement.offsetHeight is a native property that cannot be observed by Vue. An element's height can by changed by the browser at any time without Vue's knowledge. You have to use another means to respond to changes in an element's size, such as using ResizeObserver or listening to the window resize event.

Vue 2's reactivity system works with plain objects only. See Reactivity in Depth for more information.