Question

我的视图刀片是这样的：

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

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

如果单击该按钮，它将调用dataModal组件（以模态的形式）

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的模态

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

我该怎么做？

如何在response = false时订购，仍然会出现带有class = modal-content-data的模态？

请帮帮我

Answer 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>

如何在vue组件上显示模态模态？

1 个答案: