Marina_Nikitina
@Marina_Nikitina

Как использовать модальное окно Bootstrap динамически с помощью Vue?

Подскажите пожалуйста, с Vue я только начала своё знакомство, как правильно динамически использовать модальные окна Bootstrap с помощью Vue?
Я использую Laravel, в шаблоне добавляю следующие компоненты:

<button @click="showModal = true">Кнопка 1</button>
<modal v-if="showModal" @close="showModal = false">
    <template slot="modal-header"> Заголовок 1 </template>
    <template slot="modal-text"> Текст 1 </template>
    <template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>
</modal>

<button @click="showModal = true">Кнопка 2</button>
<modal v-if="showModal" @close="showModal = false">
    <template slot="modal-header"> Заголовок 2 </template>
    <template slot="modal-text"> Текст 2 </template>
    <template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>
</modal>


В компоненте modal.vue следующий код:

<template>
<div class="modal fade show" id="myModal" style="display: block;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><slot name="modal-header"></slot></h4>
                <button type="button" class="close" @click="$emit('close')" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" >×</span>
                </button>
            </div>
            <div class="modal-body">
                <slot name="modal-text"></slot>
            </div>
            <div class="modal-footer">
                <slot name="modal-footer"></slot>
                <button type="button" class="btn btn-danger" @click="$emit('close')" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    export default {
      data () {
          return {
              showModal: false,
              modalText: ''
          }
      },
      methods: {
          showModalFn: function (showModalData) {
              this.showModal = true
              this.modalText = 'Whatever you want to show'
          }
      }
    }
</script>


При нажатии на кнопки открывается всегда модальное окно с содержимым кнопки 2.

Планируется до 30 таких элементов на странице. Есть вариант решения на jquery, с динамическим содержимым при наличии одного окна, но всё же хочу реализовать это на Vue.

Я так поняла, что нужно передать id для каждого окна, чтобы динамически менять содержимое.
Как это можно реализовать?
  • Вопрос задан
  • 158 просмотров
Пригласить эксперта
Ответы на вопрос 3
@hello_my_name_is_dany
Backend Developer (Node.js, PHP, C#)
Может для Bootstrap во Vue использовать готовую обёртку?
https://bootstrap-vue.org/docs/components/modal
Ответ написан
no_one_safe
@no_one_safe
Планируется до 30 таких элементов на странице, поэтому делать такое кол-во окон нельзя, дабы не увеличивать размер DOM

Этого не будет. У вас изначально переменная showModal = false, а условие v-if говорит нам что в доме ничего не будет. И появится только после нажатия на кнопку. Когда же окно скроется - оно исчезнет из дома.
Ответ написан
@Mellorn
Как написал no_one_safe,

Вы пишете на Vue, но продолжаете думать на jQuery.

У вас фактически одна модалка, в которой должно быть отображено разное содержимое в зависимости от того, на какую кнопку кликнули. И для 30 кнопок не нужно рисовать 30 модалок.
У вас должна быть одна модалка, а её содержимым вы управляете через состояние компонента.
Т.е. кнопка должна триггерить состояние стейта и не более того.
Само же содержимое вы получаете либо из вычисляемого свойства, либо изменяя значение соответствующего свойства в data.
Если проблематично организовать всё в рамках единого компонента, вместо использования локального состояния выносите стейт модалки во Vuex. И управляйте состоянием модалки через него.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы