@fantazerno

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

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

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

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


Не могу понять, как тоглить видимость окон, навешивать на каждое окно значение видимости в data выглядит странно.
  • Вопрос задан
  • 149 просмотров
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Наделать самодостаточных компонентов, которые будут открывать нужные окна, содержа в себе состояние окна, по типу такого:
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 - лучше всего встраивать компонент в каждую строку, чем заниматься пробросом текущей строки в "общий" на список компонент.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
29 окт. 2020, в 03:40
4000 руб./за проект
29 окт. 2020, в 03:23
400 руб./в час
29 окт. 2020, в 02:05
3000 руб./за проект