VueJS. Получить все компоненты в slot при помощи this.$refs
Есть некий компонент абстрактное содержимое которого следующее:
<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(принципиальное требование)?
Ответы (1 шт):
Из ситуации вышел следующим образом: в ref разделителей указал уникальные значения
<template v-slot:separator="{ item }">
<ui-separator v-if="isShowSeparator(item.id)" :ref="'separator_' + item.id">
{{ item.separatorText }}
</ui-separator>
</template>
А в функции которая с ними работает получаю следующим образом
const refs = this.$refs;
const separators = Object.keys(refs)
.filter((key) => key.includes('separator'))
.reduce((obj, key) => {
obj.push(refs[key]);
return obj;
}, []);