How can I close modal after click save button in vue component?

Question

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>

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

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

How can I close the modal after call createImage method?

Solution

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.

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>