如何在 vue 组件的模态中显示模态?
[英] How can I display modal in modal on vue component?
本文介绍了如何在 vue 组件的模态中显示模态?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的视图刀片是这样的:
<a href="javascript:" class="btn btn-block btn-success" @click="modalShow('modal-data')">点击这里</a><data-modal id="modal-data"></data-modal>
如果按钮被点击，会调用dataModal组件(以modal的形式)
像这样的dataModal组件:
<div class="modal" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><!-- 模态内容数据--><div class="modal-content modal-content-data"><表单id="表单"><div class="modal-body">...
...<button type="submit" class="btn btn-success" @click="add">节省...</表单>
<!-- 模态内容成功--><div class="modal-content modal-content-success" style="display: none"><div class="modal-body">...
<!-- 模态内容失败--><div class="modal-content modal-content-failed" style="display: none"><div class="modal-body">...
<脚本>导出默认{...方法:{添加(事件){常量数据 = {...}this.$store.dispatch('添加', 数据).then((响应) => {如果(响应 == 真)this.$parent.$options.methods.modalContent('#modal-data', '.modal-content-success')别的this.$parent.$options.methods.modalContent('#modal-data', '.modal-content-failed')}).catch(错误=> {console.log('错误')});}}}
如果 response = true，那么会出现 class = modal-content-success 的模态
如果 response = false 则出现 class = modal-content-failed 的模态
我想要如果 response = false，modal with class = modal-content-data 仍然显示.所以 modal with class = modal-content-failed 出现在 modal with class class = modal-content-data
我该怎么做?
如何排序，当 response = false 时，仍然出现 class = modal-content-data 的模态?
请帮帮我
解决方案
正如我所看到的，您正在使用引导程序，这对我有用:
<div><div id="modal-example" class="modal" tabindex="-1" role="dialog">...在您的示例中插入其余代码
然后在您的 href 链接标签中:
<a href="javascript:void(0)" class="btn btn-block btn-success" data-target="#modal-example" data-toggle="modal">显示模态</a>
My view blade like this :
<a href="javascript:" class="btn btn-block btn-success" @click="modalShow('modal-data')">
Click here
</a>
<data-modal id="modal-data"></data-modal>
If the button clicked, it will call dataModal component (In the form of modal)
dataModal component like this :
<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>
If response = true then modal with class = modal-content-success will appear
If response = false then modal with class = modal-content-failed will appear
I want if response = false, modal with class = modal-content-data still showing. So modal with class = modal-content-failed appears in modal with class class = modal-content-data
How can I do that?
How to order that when response = false, modal with class = modal-content-data still appear?
Please help me
解决方案
As i can see you are using bootstrap, this worked for me:
<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>
And then in your href link tag:
<a href="javascript:void(0)" class="btn btn-block btn-success" data-target="#modal-example" data-toggle="modal">
Show Modal
</a>
这篇关于如何在 vue 组件的模态中显示模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
