[Vuejs]-Passing data from v-for list card to corresponding modal

by

0👍

✅

You could assign the selected plan to a variable and display that in the modal like this:

new Vue({
  data: () => ({
    plants: ['Cebolinha', 'Coentro', 'Louro'],
    plant: null
  })
}).$mount('#app');
.modal {
  position: fixed;
  width: 20%;
  padding: 2rem;
  top: 0;
  left: 0;
  background-color: #FFF
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="p in plants">{{p}} <button href="#" @click="plant = p">details</button></li>
  </ul>
  <div class="modal" v-if="plant">
    {{plant}}
    <button @click="plant = null">Close</button>
  </div>
</div>

Leave a comment