Only trigger function on the selected card where cards are displayed using v-for

Question

Still trying out Vue with vue material; I used v-for to display the array objects into separate cards.

so in the template,it looks like this:

<md-card v-for="fruit in fruits" :key="fruit.id" md-with-hover>
  <md-card-content>
    <p> {{ fruit.id }} | {{ fruit.name }}  
  </md-card-content>
  <md-card-actions>
    <md-button @click="showInfo=true">
      <span v-if="showInfo"> You have selected the {{fruit.name}} with ID number: {{fruit.id}}</md-button>
  </md-card-actions>
</md-card>

and the data looks like this:

fruits: [ {id: '1', name: 'Kiwi'}, {id: '2', name: 'Mango'}, {id: '3', name: 'Apple'}], showInfo: false

Here's what I wanted to do:

• When I click on a card (for example, the Kiwi card) it will give me only the details of that object (id and name)

From what I did above, when I click on the button of the Kiwi card, it also triggers the span display on the other cards.

How should I go on about this?

Answer 1

Replace boolean for showInfo with fruit.id or index:

Vue.use(VueMaterial.default)
new Vue({
  el: '#demo',
  data() {
   return {
     fruits: [ {id: '1', name: 'Kiwi'}, {id: '2', name: 'Mango'}, {id: '3', name: 'Apple'}], 
     showInfo: null
   }
  },
  methods: {
    //  set id
   showHide(id) {
     this.showInfo === id ? this.showInfo = null : this.showInfo = id
   }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css"> 
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
<div id="demo">
<md-card v-for="fruit in fruits" :key="fruit.id" md-with-hover>
  <md-card-content>
     <p> {{ fruit.id }} | {{ fruit.name }}  
   </md-card-content>
   <md-card-actions>
                       <!--  call method and pass id -->
     <md-button @click="showHide(fruit.id)">more</md-button>
                 <!--  compare with id -->
     <span v-if="showInfo === fruit.id"> 
       You have selected the {{fruit.name}} with ID number: {{fruit.id}}
     </span>
   </md-card-actions>
  </md-card>
</div>
<script src="https://unpkg.com/vue-material"></script>