仅在使用 v-for 显示卡片的所选卡片上触发功能

Question

仍在用 vue 试用 Vue material；我使用 v-for 将数组对象显示到单独的卡片中。

所以在 template 中，它看起来像这样：

<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>

并且 data 看起来像这样：

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

这是我想做的事情：

当我点击卡片（例如 Kiwi 卡片）时，它只会给我该对象的详细信息（ID 和名称）

从我上面做的，当我点击Kiwi卡的按钮时，它也触发了其他卡上的跨度显示。

我该如何处理？

Answer 1

将 showInfo 的布尔值替换为 fruit.id 或索引：

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>

仅在使用 v-for 显示卡片的所选卡片上触发功能

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

javascript

vue.js

vuejs2

v-for

vue-material