单击 vue 组件中的保存按钮后如何关闭模式?
How can I close modal after click save button in vue component?
我的 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 方法。
用于调用 ajax 的 addPhoto 方法。 ajax响应后,将响应传递给父组件
中的createImage方法
运行之后,模态框没有关闭。单击保存按钮后模态是否应该关闭
如何在调用 createImage 方法后关闭模态框?
您不能以这种方式同时使用 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>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
如果我明白你想要什么,那么将这个 data-dismiss="modal" 添加到你想要用于关闭模态的任何按钮。假设你有一个按钮上传图像点击你想要上传图片并关闭模式,然后将 data-dismiss="modal" 添加到按钮 属性 就像我在上面显示的那样...
我的 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 方法。
用于调用 ajax 的 addPhoto 方法。 ajax响应后,将响应传递给父组件
中的createImage方法运行之后,模态框没有关闭。单击保存按钮后模态是否应该关闭
如何在调用 createImage 方法后关闭模态框?
您不能以这种方式同时使用 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>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
如果我明白你想要什么,那么将这个 data-dismiss="modal" 添加到你想要用于关闭模态的任何按钮。假设你有一个按钮上传图像点击你想要上传图片并关闭模式,然后将 data-dismiss="modal" 添加到按钮 属性 就像我在上面显示的那样...