VueJS + VueRouter + Bootstrap-vue (модальное от модального) = - PullRequest
Новая
       8

VueJS + VueRouter + Bootstrap-vue (модальное от модального) =

0 голосов
/ 24 октября 2018

Я постараюсь отобразить модальные из модальных (я создам отдельные компоненты для каждого модального).Когда второй модал закрыт, я хочу вернуться к первому модалу.Но после того, как я впервые отобразил модальное изображение во второй раз, я получил ошибку ', не удалось преобразовать исключение в строку ' из Administration.jsЯ тоже использую VueRouter.

Administration.js (основная запись с просмотром маршрутизатора) -> partner.vue (с компонентом partnerEditor.vue)

partnerEditor.vue 

    <template>
    <div>
        <b-modal ref="partnerEditor" title="Partner" :busy="isBusy" cancel-title="cancel" ok-variant="info" ok-title="save" v-on:ok="onCreate">
            <div class="form-group">
                <div class="input-group mb-3">
                    <select class="form-control">
                        <option v-for="contact in contacts">{{ contact.name }}</option>
                    </select>
                    <div class="input-group-append">
                        <b-btn v-on:click="$refs.contactEditor.show()"></b-btn>
                    </div>
                </div>
            </div>
        </b-modal>
        <contactEditor ref="contactEditor" v-on:hide="$refs.partnerEditor.show()"></contactEditor>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                contacts: [],
                isBusy: false
            }
        },
        methods: {
            show() {
                this.$refs.partnerEditor.show();
            }
        },
        components: {
            contactEditor: () => import('./contactEditor.vue'),
        },
    }
</script>

contactEditor.vue 

<template>
    <b-modal ref="contactEditor" title="Contact" :busy="isBusy" cancel-title="cancel" ok-variant="info" ok-title="save" v-on:ok="onCreate" v-on:hide="$emit('hide')">
        <div class="form-group">
            <label>name</label>
            <input type="text" class="form-control" placeholder="" />
        </div>
    </b-modal>
</template>

<style></style>

<script>
    export default {
        model: {
            event: 'hide'
        },
        data() {
            return {
                isBusy: false
            }
        },
        methods: {
            show() {
                this.$refs.contactEditor.show();
            },
        }
    }
</script>

маршруты 

const router = new VueRouter({
    routes: [
        {
            name: 'configuration', path: '/configuration', component: () => import('./administrator/configuration/index.vue'),
            children: [
                { name: 'configuration-partner', path: '/configuration/partner', component: () => import('./administrator/configuration/partner.vue') }
            ]
        }
    ]
});
...