How to make a dynamic modal in vue?

Question

JavaScript

I just started to study vue and now there is such a task, there is an array with data, these are projects

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

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

and I output them via 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>

I want to make it so that when you click on the project, a modal window opens and the project data (name, picture) is transferred there. So that there is one Modal.vue component and somehow transfer data there, because there can be many projects and you don’t want to make your own modal for each project. Thank you!

Answer 1

If this is only for one page, then you can do without a component. Just add a modal div to the page that will show up when you select a project. As long as selectedProject has a value cast to false (eg null) - that div is hidden. We wrote down a link to the project there - the div was activated.

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

Answer 2

https://ru.vuejs.org/v2/examples/modal.html
And throw data into it through props.