Estoy tratando de acceder a la altura de un div en una cuadrícula en una aplicación Nuxt.
<template> <div class="grid grid-cols-3"> <client-only> <Item v-for="( item, itemIndex ) in ItemsArray" :key="`item-${itemIndex}`" v-bind="item" :ref="`item${itemIndex}`" /> </client-only> </div> </template> <script> export default { mounted() { this.itemHeight = this.$refs.item1.clientHeight }, data() { return { itemHeight: 0, } } } </script> Pero recibo este mensaje de error Cannot read properties of undefined (reading 'clientHeight') . no se como arreglar eso...
Esto se debe a que cuando agrega una ref en un v-for Vue, se creará una matriz de refs y no cada ref en sí.
Actualmente no estoy en mi PC, pero por lo que recuerdo, tendrás que hacer algo como:
mounted() { this.itemHeight = this.$refs.item1[0].clientHeight }, Si esa no es la respuesta, intente depurar con console.log(this.$refs.item1) para ver exactamente cómo está estructurado. A partir de ahí podrás descubrirte a ti mismo.