0

Есть некий компонент абстрактное содержимое которого следующее:

<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(принципиальное требование)?

2
  • не очень понял проблему. У Вас же нет v-for вот Вы и получаете только 1 компонент. Будет v-for, в refs будет их массив
    – Dmytro
    21 янв 2021 в 11:25
  • @Дмытрык дополнил вопрос
    – pavel
    21 янв 2021 в 11:45

1 ответ 1

0

Из ситуации вышел следующим образом: в 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;
    }, []);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.