如何在 vue 组件的模态中显示模态？答案

【问题标题】：How can I display modal in modal on vue component?如何在 vue 组件的模态中显示模态？
【发布时间】：2018-01-09 03:44:20
【问题描述】：

我的视图刀片是这样的：

<a href="javascript:" class="btn btn-block btn-success" @click="modalShow('modal-data')">
    Click here
</a>

<data-modal id="modal-data"></data-modal>

如果按钮被点击，会调用dataModal组件（以modal的形式）

dataModal 组件如下：

<template> 
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <!-- modal content data -->
            <div class="modal-content modal-content-data">
                <form id="form">
                    <div class="modal-body">
                        ...
                    </div>
                    ...
                    <button type="submit" class="btn btn-success" @click="add">
                        Save
                    </button>
                    ...
                </form>
            </div>
            <!-- modal content success -->
            <div class="modal-content modal-content-success" style="display: none">
                <div class="modal-body">
                    ...
                </div>
            </div>
            <!-- modal content failed -->
            <div class="modal-content modal-content-failed" style="display: none">
                <div class="modal-body">
                    ...
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    export default{
        ...
        methods:{
            add(event){
                const data = {
                    ...
                }
                this.$store.dispatch('add', data)
                .then((response) => {
                    if(response == true) 
                        this.$parent.$options.methods.modalContent('#modal-data', '.modal-content-success')
                    else              
                        this.$parent.$options.methods.modalContent('#modal-data', '.modal-content-failed')
                })
                .catch(error => {
                    console.log('error')
                });
            }
        }
    }
</script>

如果 response = true 则将出现 class= modal-content-success 的模态

如果 response = false 则会出现 class= modal-content-failed 的模态

我想要如果响应 = false，模式与 class= modal-content-data 仍然显示。所以模态 class= modal-content-failed 出现在模态中，类 class= modal-content-data

我该怎么做？

response = false 时如何排序，class= modal-content-data 的模态仍然出现？

请帮帮我

【问题讨论】：

这是 vue.js 网站上的一个很好的例子 vuejs.org/v2/examples/modal.html 我会编写一个带有插槽的通用模态组件并使用 v-if="condition" 隐藏/显示不同的模态
@Reiner，这不是回答我的问题
没有人可以帮忙吗？
当然不是答案，是评论。如果我可以为您提供帮助，我建议您更准确地描述您的问题。您宁愿描述一项工作任务，但不是特定问题。我认为这两个链接和第一个链接是您所需要的全部 vuejs.org/v2/api/#v-if 隐藏/显示和 vuejs.org/v2/guide/components.html 组件。

标签： vue.js laravel-5.3 vuejs2 vue-component vuex

【解决方案1】：

我可以看到您正在使用引导程序，这对我有用：

<template>
    <div>
        <div id="modal-example" class="modal" tabindex="-1" role="dialog">
            ...insert rest of code here as is in your example
        </div>
    </div>
</template>

然后在你的href链接标签中：

<a href="javascript:void(0)" class="btn btn-block btn-success" data-target="#modal-example" data-toggle="modal">
Show Modal
</a>

【讨论】：