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

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?

CodePudding user response：

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: {
    //