How to show using vue static data into modal? - vue.js

Question

I have this couple of 'cards' with this content
<div class='card'>
<span>title one </span>
<button #click='open = !open'>show</button>
</div>
<div class='card'>
<span>title two </span>
<button #click='open = !open'>show</button>
</div>
Where in the same component I show this modal. What i need to show inside of it is if I click the first button, show title one, if I click button 2,show title 2 and so on...
What will be the best approach to do this task? (show in modal the card content)

Answer 1

First a couple of things:
ooen might be a typo, did you mean open?
=! looks like a single operator but it actually means open = !open in this context. Put a space between the = and ! to make it clear what it means.
If you want to control the visibility of two sections independently then you will need two separate data properties (open1 and open2). Use v-if or v-show to control the visibility.
new Vue({
el: '#app',
data: {
open1: false,
open2: false,
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="card">
<span v-if="open1">title 1</span>
<button #click="open1 = !open1">toggle</button>
</div>
<div class="card">
<span v-if="open2">title 2</span>
<button #click="open2 = !open2">toggle</button>
</div>
</div>
If you will have lots of these, then wrap the functionality into a separate component so you don't have to define open1, open2, ... and so on.
Vue.component('card', {
template: `
<div class="card">
<span v-if="open"><slot/></span>
<button #click="open = !open">toggle</button>
</div>`,
data() {
return {
open: false
}
}
})
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<card>title 1</card>
<card>title 2</card>
</div>

Answer 2

I found the solution.
Create the cards data into a array of objects in the data instance
Use a v-for to loop through the cards
Create a method that capture the card clicked, create a projectSelected value in data
<button #click="showModal = !showModal,open(project)">Open</button>
captureProject(card) {
this.projectSelected = project;
},
Show the selected project inside the modal
{{ projectSelected .title }}