使用动态内容从 vuejs 中的方法打开模态

Question

我正在 VueJs 中构建一个组件，如果条件为真，则需要打开模态并从控制器获取数据并在模态中显示。

\n\n

我在网上查找过，但找不到如何在使用 接收数据后设置动态内容axios。

\n\n

这是我的 ModalComponent.vue

\n\n

<template>\n<div class="modal fade show" id="myModal" style="display: block;">\n    <div class="modal-dialog" role="document">\n        <div class="modal-content">\n            <div class="modal-header">\n                <h4 class="modal-title"><slot name="modal-header"></slot></h4>\n                <button type="button" class="close" @click="$emit(\'close\')" data-dismiss="modal" aria-label="Close">\n                    <span aria-hidden="true" >\xc3\x97</span>\n                </button>\n            </div>\n            <div class="modal-body">\n                <slot name="modal-text"></slot>\n            </div>\n            <div class="modal-footer">\n                <slot name="modal-footer"></slot>\n                <button type="button" class="btn btn-danger" @click="$emit(\'close\')" data-dismiss="modal">Close</button>\n            </div>\n        </div>\n    </div>\n</div>\n</template>\n\n<script>\n    export default {\n        name: "ModalComponent"\n    }\n</script>\n

\n\n

在其他组件 ExampleComponent 中，我可以使用这样的按钮显示模式

\n\n

<button @click="showModal = true">Show Modal</button>\n<modal-component v-if="showModal" @close="showModal = false">\n    <template slot="modal-header"> Testing something </template>\n    <template slot="modal-text"> Modal Body will go here </template>\n    <template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>\n</modal-component>\n

\n\n

但我想在某些条件成立时自动打开此模式，从控制器获取数据并显示。

\n\n

我在 ExampleComponent 中有一个方法，我可以从控制器接收数据，但如何将该数据设置到modal-text插槽中并打开模式。

\n\n

谢谢

\n

Answer 1

添加

<template slot="modal-text"> {{ modalText }} </template>

反而

<template slot="modal-header"> Testing something </template>

然后加

data () {
    return {
        showModal: false,
        modalText: ''
    }
},
methods: {
    showModalFn: function (showModalData) {
        // your code
        // ...
        this.showModal = true
        this.modalText = 'Whatever you want to show'
    }
}