单击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组件中的保存按钮后如何关闭模态?的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js模态组件示例未关闭

带有子表单的Vue模态对话框,提交数据

vue给模态框弹窗添加路由,实现页面后退可以关闭模态框

模态仅在第二次单击后显示

单击laravel vuejs中的按钮后如何隐藏bootstrap-vue模式

[我想在VUE js中单击按钮时显示模态框