Как сделать динамическое модальное окно на vue?

Question

[Lector]

Только начал изучать vue и сейчас стоит такая задача, есть массив с данными, это проекты

data() {
            return {
                projects: [
                    {
                        id: '1',
                        src: 'siemens.jpg',
                        title: 'Siemens'

                    },
                    {
                        id: '2',
                        src: 'nokia.jpg',
                        title: 'Nokia'
                    },
         ..............

и я вывожу их через v-for:

<div v-for="item in projects" :key="item.id" @click="showModal">
     <img :src="require('@/assets/portfolio/' + item.src)" :alt="item.title" loading="lazy" width="200" height="200">
      <p>{{item.title}}</p>
</div>

хочу сделать так чтобы при клике на проект открывалось модальное окно и туда передавались данные проекта(название, картинка). Чтобы был один компонент Modal.vue и вот как-то туда передавать данные, потому что проектов может быть много и не хочется делать под каждый проект свою модалку. Спасибо!

Comments

[iBird Rose]

@click="showModal" сюда, к примеру можешь передать item.id @click="showModal(item.id)"
ну и внутри функции уже с ним работать как хочешь

Answer 1

[Rsa97]

Если это только для одной страницы, то можно и без компонента обойтись. Просто добавьте на страницу модальный div, который будет показываться при выборе проекта. Пока в selectedProject значение, приводимое к false (например, null) - этот div скрыт. Записали туда ссылку на проект - div активировался.

<div v-show="selectedProject" class="modal">
  ...
  {{ selectedProject.title }} 
  ...
</div>

Comments

[Lector]

вроде понятно, но не совсем, саму модалку вызываю без проблем а вот данные как туда всунуть не понятно

[Roman K]

Здесь лучше использовать v-if, т.к. в противном случае v-show будет всего лишь скрывать элемент, но он будет находиться в DOM и пытаться рендериться. И, например, {{ selectedProject.title }} вызовет ошибку "Uncaught TypeError: Cannot read properties of undefined (reading 'title')"

Понятно, что v-show лучше по производительности, но иначе придётся всё писать в виде {{ selectedProject ? selectedProject.title : "" }}

[Rsa97]

Roman Kitaev, Да, можно через v-if. А можно через современный синтаксис selectedProject?.title

[Rsa97]

Lector, Данные так же, как и в любой другой элемент в Vue. Либо через шаблон {{ }}, либо через v-bind

[Lector]

Rsa97, буду пробовать, спасибо!

Answer 2

[Spaceoddity]

https://ru.vuejs.org/v2/examples/modal.html
И швыряйте в него данные через пропсы.