@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'),
                                    }
                                }
                            ]
                        },
}


Не понимаю что нужно написать вместо "тут имя с переменной" чтобы все работало как задумано. Реально ли вообще воплотить эту задумку в жизнь?
  • Вопрос задан
  • 117 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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