использование bootstrap4 modal в vuejs

Question

Я пытаюсь визуализировать модальное с простым изменением моих данных, используя vue @click на элементе, но я не могу получить модальное всплывающее окно. Я надеюсь, что кто-то может указать мне правильное направление здесь.

Я не использую vue - bootstrap в этом проекте просто bootstrap 4 для справки здесь.

my нажмите

  <div class="d-flex justify-content-between">
       <span class="d-block">These students cannot be in the same group:</span>
       <button @click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
  </div>

мой модал

<!--MODAL SECTION-->
        <div v-if="showModal" class="modal" id="myModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    <div class="modal-body">
                         <p>Modal body text goes here.</p>
                    </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary">Save changes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
<!--MODAL SECTION-->

мои данные

data:{
otherData: [],
showModal: false
}

Answer 1

Вам нужны данные-переключатель и цель данных на кнопке:

  <div class="d-flex justify-content-between">
       <span class="d-block">These students cannot be in the same group:</span>
       <button data-target="#myModal" data-toggle="modal" @click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
  </div>

См .: https://getbootstrap.com/docs/4.0/components/modal/#via -данные-атрибуты

Поскольку модальный управляемый через некоторые внутренние органы bootstrap, я не думаю, что вам нужен обработчик v-if и @click.