VueJS + VueRouter + Bootstrap-vue（模态从模态）= <失败到=“” convert =“” exception =“” to =“” string =“”>

Question

我将尝试从模态显示模态（我将为每个模态创建单独的组件）。当第二个模态关闭时，我想返回第一个模态。但是第二次显示第一次模态后，我从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') }
            ]
        }
    ]
});