Vue.js Vue3多姆参考已安装的添加EventButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButtButt

我在vue 3中有这个组件:

<template>
    <div class="list-cell">
        <div
            v-for="(value, index) in lines"
            ref="items"
            :key="index"
            class="list-cell--item"
        >
            {{ value }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { Ref, ref, onMounted, onUnmounted, PropType } from 'vue';

const items: Ref<HTMLElement[]> = ref([]);

defineProps({
    lines: { type: Array as PropType<string[]>, default: () => [] },
});

const handleMouseEnter = () => {
    console.log(1);
};
const handleMouseLeave = () => {
    console.log(2);
};

onMounted(() => {
    items.value.forEach((item) => {
        item.addEventListener('mouseenter', handleMouseEnter);
        item.addEventListener('mouseleave', handleMouseLeave);
    });
});
onUnmounted(() => {
    items.value.forEach((item) => {
        item.removeEventListener('mouseenter', handleMouseEnter);
        item.removeEventListener('mouseleave', handleMouseLeave);
    });
});
</script>

此组件是具有多行和翻页的表中单元格的简化版本.

它并不总是为所有单元格记录1或2 但如果我向事件监听器添加超时，它总是正确记录1或2:

setTimeout(() => {
    items.value.forEach((item) => {
        item.addEventListener('mouseenter', handleMouseEnter);
        item.addEventListener('mouseleave', handleMouseLeave);
    });
}, 5000);

有人知道为什么吗？

这是使用单元格的表:

<Table>
    <TableHeader
        slot="table-header"
        :columns="tableColumns"
    />
    <TableBody
        slot="table-body"
    >
        <TableRow
            v-for="(entity, index1) in dataSource"
            :key="currentItemOffset + index1"
            :row="entity"
            rowid="index1"
        >
            <TableCell
                v-for="(item, index2) in entity"
                :key="currentItemOffset + index2"
            >
                <ComponentWithIssue
                    :lines="item"
                ></ComponentWithIssue>
            </TableCell>
        </TableRow>
    </TableBody>
</Table>