Tengo un componente que toma una matriz de 50 objetos.
<template> <div v-for="(item,index) in items" ref="items" :key="index"> // </div> </template> props: { items: { type: Array, required: true, }, } Quiero que se verifiquen los items de utilería para su offsetHeight , así que hice una propiedad calculada, agarré los items por su ref y primero los probé devolviendo solo eso.
computed: { allItems() { const all = this.$refs.items; return all; } } en VueTools, esto muestra una matriz de HTMLDivElement y funciona como se esperaba si uso allItems en lugar de items en la plantilla.
ahora quiero implementar la verificación de offsetHeight :
computed: { allItems() { const all = this.$refs.items; return all.filter(x => { x.offsetHeight > 300; }) } } pero esto muestra la propiedad calculada ahora como 15 , por lo que los filtró, pero cuando cambio la altura de la ventana, el offsetHeight en la interfaz de usuario cambia, pero la propiedad calculada muestra 15 independientemente. ¿No debería esto mostrar continuamente los valores actuales?
¿No debería esto mostrar continuamente los valores actuales?
No, porque HTMLElement.offsetHeight es una propiedad nativa que Vue no puede observar. El navegador puede cambiar la altura de un elemento en cualquier momento sin el conocimiento de Vue. Tiene que usar otro medio para responder a los cambios en el tamaño de un elemento, como usarResizeObserver o escuchar el evento de cambio de tamaño de la ventana .
El sistema de reactividad de Vue 2 funciona solo con objetos simples . Consulte Reactividad en profundidad para obtener más información.