在vue组件中单击“保存"按钮后，如何关闭模态? [英] How can I close modal after click save button in vue component?

问题描述

我的Vue组件是这样的:

My vue component like this :

<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方法.

If I click button addPhoto, it will call addPhoto method.

addPhoto方法用于调用ajax. ajax响应后，它将响应传递给父组件中的createImage方法

addPhoto method used to call ajax. After response of ajax, it will pass the response to createImage method in parent component

运行后，模态不会关闭.单击保存按钮后，模态是否应该关闭

After run it, the modal not close. Should the modal close after click save button

调用createImage方法后如何关闭模态?

How can I close the modal after call createImage method?

推荐答案

您不能以此方式同时使用Bootstrap和Vue.每个人都想控制DOM，他们将踩在彼此的脚趾上.要一起使用它们，您需要包装器组件，以便Bootstrap可以控制内部的DOM组件和Vue可以与包装器通信.

You cannot use Bootstrap and Vue together this way. Each wants to control the DOM, and they will step on each others' toes. To use them together, you need wrapper components so that Bootstrap can control the DOM inside the component and Vue can talk to the wrapper.

幸运的是，有一个项目已经为Bootstrap小部件制作了包装器组件.它是 Bootstrap-Vue .当您按下确定按钮时，它的模式将自动关闭.我已经把他们的模态例子变成了模糊的样子，就像您要尝试的那样.

Fortunately, there is a project that has made wrapper components for Bootstrap widgets. It is Bootstrap-Vue. Its modal will automatically close when you press its ok button. I have turned their modal example into something that is vaguely like what you're trying to do.

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>

这篇关于在vue组件中单击“保存"按钮后，如何关闭模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！