Как динамически отрендерить компоненты с помощью intersectionObserver?

Question

[Ksenia992]

Есть массив элементов, которые рендерятся с помощью v-for. Необходимо отрендерить только те элементы, которые видны на экране, остальные же должны быть заменены на компонент-пустышку Placeholder (пустой компонент с такой же высотой, как остальные элементы). Есть такая логика, но она работает неправильно, потому что переменная одна и всегда будет true ее последнее значение, и соответственно компонент Placeholder отрендеривается всегда,даже в видимой части. Полагаю, нужно как-то переписать, используя уникальный идентификатор для каждого элемента (index), но не знаю точно как. Заранее благодарю за помощь

<template v-for="(item, index) in section.items">
      <li
        v-node-intersect="intersectionObserver"
        class="feed-list-item"
        :key="index"
      >
        <feed-item v-if="showItems" :item="item" />
        <content-placeholder v-else />
      </li>
</template>

<script>
const intersectionObserver = ref(null)
const showItems = ref < boolean > (true)

onMounted(() => {
  intersectionObserver.value = new IntersectionObserver(handleIntersection)
})

function handleIntersection(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      showItems.value = true
    }
    if (!entry.isIntersecting) {
      showItems.value = false
    }
  })
}
</script>

Comments

[iljaGolubev]

<feed-item v-if="item.isIntersecting" :item="item" />

[Ksenia992]

iljaGolubev, у item нет свойства isIntersecting, оно есть только у entry (HTML ELEMENT type), получаемый через Observer

[iljaGolubev]

ну так добавьте его в handleIntersection