Как получить доступ к html элементам в refs цикле на vue 3?

Question

[serdev5578]

не выходит получить каждый элемент компонента в цикле через :ref , вот сам код цикла

<component
                  v-for="(item, index) in searchResultBuild" :key="item.id"
                  :item="item"
                  :is="itemSearchTemplate"
                  :isChecked="(isMultipleSelect || oneSelected) && selectedIds.includes(item.id)"
                  :isHasImage="isHasImage"
                  :ref="setItemRef"
                  :class="selectedIndex === index ? 'selected-item' : ''"
                  @click="selectItem(item)"
              />

а вот метод через который устанавливается массив рефов

setItemRef(el) {
      if (el) {
        this.resultsRefs.push(el)
      }
    },

но таким способом в массив мне попадают обьекты со свойствами компонента в цикле а не html элементы а мне нужно получить именно список html элементов и применить к ним скролл

this.resultsRefs[this.selectedIndex].scrollIntoView(false);

Answer 1

[modelair]

вы хотите доступ к HTML-элементам, а самих элементов в коде у вас нет.
Вы и получаете ref соответствующий компоненту.

<span v-for="i in 20" :key="i" ref="spans">{{ i }}</span>

const spans = ref()
onMounted(() => {
  console.log(spans.value)
})

В целом можно в вашем компоненте вытаскивать нужные данные через expose, затем через ref ими пользоваться