В Vue.js, при использовании `ref` в контексте `v-for`, объекты `VNodeRef` представляют собой ссылки на виртуальные узлы (virtual nodes), которые создаются Vue для рендеринга компонентов. Они не представляют собой DOM-элементы напрямую, и это может вводить в заблуждение.
Если вам нужно получить доступ к реальным DOM-элементам из `VNodeRef`, вы можете изменить вашу логику. Вместо использования `VNodeRef`, можно использовать `ref` с указанием элементов, чтобы напрямую ссылаться на DOM-элементы.
Вот как вы можете изменить ваш код:
1. Используйте `ref` для создания массива реальных DOM-элементов, а не `VNodeRef`.
2. Измените функцию `setPostRef` для сохранения ссылок на DOM-элементы.
Вот пример, как это можно сделать:
```html
<template>
<p
class="infinite-scroll__item"
v-for="(post, index) in showedPosts"
:key="index"
:ref="setPostRef"
>
{{ post.title }} || {{ post.date.toDateString() }}
</p>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const postRefs = ref([]);
// Функция для сохранения ссылок на элементы
const setPostRef = (el) => {
if (el) {
postRefs.value.push(el);
}
};
// Можете добавить дополнительную логику для работы с postRefs
return {
postRefs,
setPostRef,
};
},
};
</script>
```
Теперь, в `postRefs` будут храниться ссылки на реальные DOM-элементы. Вы можете обращаться к ним, например, используя `postRefs.value[index]`, где `index` – это индекс нужного вам элемента.
Примечание:
- Убедитесь, что вы обнуляете массив `postRefs` (например, `postRefs.value = []`) перед тем, как обновлять список `showedPosts`, иначе предыдущие DOM-ссылки будут продолжать храниться в массиве, что может привести к неожиданному поведению.
- `:ref="setPostRef"` будет срабатывать для каждого элемента, создаваемого при рендере `v-for`, добавляя соответствующий DOM-элемент в массив `postRefs`.