I am trying to access the height of a div in a grid in a Nuxt application.
<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>
But I get this error message Cannot read properties of undefined (reading 'clientHeight'). I don't know how to fix that...
That's because when you add ref in a v-for Vue will be creating an array of refs and not each ref itself.
I'm not currently on my PC but from what I remember you will have to do something like:
mounted() {
this.itemHeight = this.$refs.item1[0].clientHeight
},
If that's not the answer, try to debug with console.log(this.$refs.item1) to see exactly how it is structured. From there you will be able to figure out yourself