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 that you have read and understand our privacy policy and code of conduct.

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