Как лучше реализовать вывод модальных окон в VUE?

Question

[fantazerno]

Есть большой список модальных окон с разным наполнением (не шаблонные).
Как лучше реализовать их вызов.

<button @click="showModal('reg')"></button>

modal-item(target="reg")
modal-item(target="auth")
....

Не могу понять, как тоглить видимость окон, навешивать на каждое окно значение видимости в data выглядит странно.

Comments

[Александр]

есть уже готовы решения! к примеру: https://buefy.org/

Answer 1

[Антон Антон]

Наделать самодостаточных компонентов, которые будут открывать нужные окна, содержа в себе состояние окна, по типу такого:

spoiler

<template>

  <div>
    <q-btn
      v-bind="$attrs"
      @click="show = true"
    ></q-btn>

    <q-dialog v-model="show">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
          </p>
          <q-btn
            label="OK"
            @click="show = false"
          />
    </q-dialog>
  </div>
</template>

<script>

export default {
  inheritAttrs: false,
  data () {
    return {
      show: false
    }
  }
}

</script>

Естественно, вместо q-dialog в данном случае может быть любой готовый компонент. А подход showModal('reg') ведет к лапше в коде
В случае с v-for - лучше всего встраивать компонент в каждую строку, чем заниматься пробросом текущей строки в "общий" на список компонент.