Есть некий компонент абстрактное содержимое которого следующее:
<ui-table :items="items">
<template v-slot:separator="{ item }">
<ui-separator v-if="isShowSeparator(item.id)" ref="separator">
{{ item.separatorText }}
</ui-separator>
</template>
</ui-table>
В компоненте ui-table items и separator выводятся в цикле
<template v-for="item, index in items">
<slot name="separator" :item="item" />
// здесь находится верстка item
</template>
Данный код выводит таблицу списка элементов с переодическим разделителем по дате при выполнении условия "isShowSeparator(item.id)". Отрисовка проходит нормально и разделители отображаются.
Мне в текущем абстрактном компоненте необходимо получить все элементы ui-separator, для этого я пробую использовать this.$refs, но в ответ получаю только один последний ui-separator. Пробую ту же логику на другом компоненте без использования slot и там получаю список элементов.
Как я в методах текущего абстрактного компонента могу получить доступ ко всем экземплярам ui-separator находящихся в slot и без предварительной их записи в data(принципиальное требование)?
v-for
вот Вы и получаете только 1 компонент. Будетv-for
, вrefs
будет их массив