Estoy trabajando en una aplicación web usando Vue2
y BootstrapVue
, y tengo una serie de 6 elementos (de los cuales sólo voy a subir 3 aquí, por cuestiones prácticas), todos iguales estéticamente, pero con distinto contenido, rendereados mediante un v-for
. A ellos les estoy agregando un modal con Bootstrap, el cual podría generarlo de la misma manera, pero el detalle es que no quiero que cargue la página con los 6 modales en segundo plano. Quiero generarlos en el momento del click en el botón "Learn More" y que se muestre la información correspondiente a ese elemento del array en mi archivo .vue
.
No sé cómo hacer para relacionar mediante un index
al elemento el cual quiero que se muestre la información.
A continuación adjunto mi código:
Component.html
<div id="blocks">
<b-container>
<div class="cards">
<div class="card" v-for="card in cards">
<img :src="card.image" :alt="card.mainTitle">
<div class="card-content">
<h5>{{card.mainTitle}}</h5>
<p>{{card.text}}</p>
<a href="javascript:void(0)" @click="showModal">Learn More</i></a>
</div>
</div>
</div>
</b-container>
<b-modal ref="modal" centered hide-footer>
<div class="d-block text-center">
<h3>{{cards.mainTitle}}</h3>
<p>{{modalText}}</p>
</div>
</b-modal>
</div>
Component.vue
export default {
name: 'benefits',
data () {
return {
cards: [
{
image: require('../../assets/image1.jpg'),
mainTitle: 'Title1',
text: 'Text1',
modalText: 'Modal text content1'
},
{
image: require('../../assets/image2.jpg'),
mainTitle: 'Title2',
text: 'Text2',
modalText: 'Modal text content2'
},
{
image: require('../../assets/image3.jpg'),
mainTitle: 'Title3',
text: 'Text3',
modalText: 'Modal text content3'
}
]
}
},
methods: {
showModal () {
this.$refs.modal.show()
},
hideModal () {
this.$refs.modal.hide()
}
}
}