@AleksRap

Router-view внутри цикла v-for. Как задать динамическое имя маршрута?

Создаю компонент - каталог контактов. Внутри этого компонента есть цикл создающий отдельные router-view для каждой карточки со своим уникальным именем. Это сделано для того, чтоб каждую карточку можно было редактировать отдельно, показывая форму редактирования лишь в ней (пропадает информация о контакте -> появляется форма с полями редактирования)

<template>
    <div class="contact-cards">
        <div class="contact-cards__wrap">
            <h4 class="contact-cards__title">Контактные лица</h4>
            <router-link :to="'/panel/partners/' + this.$route.params.id + '/add-contact'">
                <button class="btn btn-outline-primary button-add">Добавить контакт</button>
            </router-link>
        </div>
       <div class="contact-card contact-cards__contact-card" v-for="contact in contacts" :key="contact.id">
            <router-view :name="'info' + contact.id" />
        </div>
        <router-link :to="'/panel/partners/' + this.$route.params.id + '/add-contact'">
            <button class="btn btn-outline-primary button-add">Добавить контакт</button>
        </router-link>
    </div>
</template>


Проблема в том, как описать маршруты с таким динамичным именем в router.js

{
                    path: '/panel/partners/:id',
                    component: () => import('./components/partner/partners/profile-partner.vue'),
                    children: [
                        {
                            path: '/panel/partners/:id',
                            components: {
                                info: () => import('./components/partner/partners/profile/view-data-for-partner.vue'),
                                contact: () => import('./components/partner/partners/profile/view-contact-person.vue'),
                                company: () => import('./components/partner/partners/profile/view-company.vue'),
                            },
                            children: [
                                {
                                    path: '/panel/partners/:id',
                                    components: {
                                        "тут имя с переменной": () => import('./components/partner/partners/profile/contact-person.vue'),
                                    }
                                }
                            ]
                        },
}


Не понимаю что нужно написать вместо "тут имя с переменной" чтобы все работало как задумано. Реально ли вообще воплотить эту задумку в жизнь?
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro
frontend developer
Компонент для отображения наверное все таки один должен быть. Который опираясь на ID показывает нужную информацию.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы