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