单击vue组件中的保存按钮后如何关闭模态?
Posted
技术标签:
【中文标题】单击vue组件中的保存按钮后如何关闭模态?【英文标题】:How can I close modal after click save button in vue component? 【发布时间】:2017-12-19 16:53:47 【问题描述】:我的 vue 组件是这样的:
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
...
<div class="modal-footer">
...
<button type="button" class="btn btn-success" @click="addPhoto">
Save
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default
...
methods:
addPhoto()
const data = id_product: this.idProduct ;
this.$store.dispatch('addImageProduct', data)
.then((response) =>
this.$parent.$options.methods.createImage(response)
);
,
</script>
如果我点击按钮 addPhoto,它会调用 addPhoto 方法。
addPhoto 方法用来调用ajax。 ajax响应后,会将响应传递给父组件的createImage方法
运行后,modal没有关闭。单击保存按钮后模态是否应该关闭
调用createImage方法后如何关闭模态框?
【问题讨论】:
您可能应该从模态组件中emit an event 并让父级同时执行addPhoto
操作并关闭模态。
你目前是如何打开模态的?
@aprouja1, data-target="#modal-add" data-toggle="modal"
@Roy J,我很困惑你的意思。你能用代码回答吗
【参考方案1】:
您不能以这种方式同时使用 Bootstrap 和 Vue。每个人都想控制 DOM,他们会踩到对方的脚趾。要将它们一起使用,您需要 wrapper components 以便 Bootstrap 可以控制组件内部的 DOM,并且 Vue 可以与包装器对话。
幸运的是,有一个项目为 Bootstrap 小部件制作了包装器组件。它是Bootstrap-Vue。当您按下它的确定按钮时,它的模态将自动关闭。我已经将他们的模态示例变成了与您正在尝试做的事情类似的东西。
new Vue(
el: '#app',
methods:
clearName()
this.name = '';
,
addPhoto(e)
console.log("dispatch the request");
);
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-btn v-b-modal.modal1>Launch demo modal</b-btn>
<!-- Modal Component -->
<b-modal id="modal1" title="Whatever" ok-title="Save" @ok="addPhoto" @shown="clearName">
<form @submit.stop.prevent="submit">
Form stuff...
</form>
</b-modal>
</div>
</div>
【讨论】:
【参考方案2】:<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
如果我明白您想要什么,请将此 data-dismiss="modal" 添加到您要用于关闭模式的任何按钮中。假设您有一个按钮 Upload Image 单击要上传图像的按钮以及关闭模式,然后像我上面显示的那样将 data-dismiss="modal" 添加到按钮属性...
【讨论】:
以上是关于单击vue组件中的保存按钮后如何关闭模态?的主要内容,如果未能解决你的问题,请参考以下文章