在next应用程序中访问div的高度会抛出错误消息

Question

我试图在next应用程序中访问网格中div的高度。

<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>

但是我得到这个错误信息Cannot read properties of undefined (reading 'clientHeight')。我不知道如何解决这个问题…

Answer 1

这是因为当您在v-forVue中添加ref时，我们将创建refs数组，而不是每个ref本身。

我现在不在我的电脑上，但据我所记得的，你将不得不做这样的事情:

mounted() {
this.itemHeight = this.$refs.item1[0].clientHeight
},

如果这不是答案，试着调试console.log(this.$refs.item1)，看看它是如何结构的。从那里你将能够了解你自己