Как отобразить модальное окно Bootstrap по Vue.js по условию?

Question

[TuMko]

Здравствуйте. Необходимо отображать модальное окно с сообщением после успешной регистрации нового пользователя. По нажатию на кнопку выполняется функция submitHandler. Она оправляет запрос к API и получает ответ в виде кода 201, 401, 409, 422 в переменную httpStatus. За показ модального окна отвечает переменная showModal, значение которой зависит от httpStatus. Если использовать директиву v-if="showModal" в контейнере модального окна, то она просто добавляет html код окна, но не запускает его. Как правильно в моем случает отобразить модальное окно?

<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

[0xD34F]

Заменить v-if="showModal" на ref="modal", добавить

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

А лучше - взять bootstrap-vue. Там управление видимостью окна идёт через v-model.

Comments

[TuMko]

Спасибо

Answer 2

[Владимир Коротенко]

Не знаю что у вас за модалка, но обычно к ним идут обвязки в виде js S(‘.modal’).show() cделайте вашу переменную вычисляемой и в ней вызывайте этот ява скрипт