How to conditionally display a Bootstrap modal window by Vue.js?

Question

Bootstrap

Hello. It is necessary to display a modal window with a message after successful registration of a new user. When the button is clicked, the submitHandler function is executed. It sends a request to the API and receives a response in the form of a 201, 401, 409, 422 code in the httpStatus variable. The showModal variable is responsible for showing the modal window, the value of which depends on the httpStatus. If you use the v-if="showModal" directive in the modal window container, then it just adds the html code of the window, but does not start it. What is the correct way to display a modal window in my case?

<template>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#modalCenter">Sign up now</button>
<!-- Modal -->
    <div v-if="showModal" class="modal fade" id="modalCenter" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modalLongTitle">Congratulations</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            You have successfully passed the registration
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Great</button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data: () => ({
    showModal: false,
    httpStatus: null
  }),
  methods: {
    async submitHandler (e) {
    //часть кода
    this.showModal = false
    //запрос к API на регистрацию нового пользователя
    await this.$store.dispatch('registerUser', data)
    //получение ответа на запрос от API в виде кода (201, 401, 409, 422 )
    this.httpStatus = this.$store.getters.getHttpStatus
    switch (this.httpStatus) {
        case 201:
          this.showModal = true
          break
        case 401:
          this.showModal = false
          break
        case 409:
          this.showModal = false
          break
        case 422:
          this.showModal = false
          break
        default:
          this.showModal = false
          break
      }
  }
}
</script>

Answer 1

Replace v-if="showModal"with ref="modal", add

watch: {
  showModal(val) {
    $(this.$refs.modal).modal(val ? 'show' : 'hide');
  },
},

Better yet, take bootstrap-vue . There, window visibility is controlled through v-model .

Answer 2

I don’t know what kind of modal you have, but usually they have bindings in the form of js S('.modal').show() make your variable calculated and call this java script in it