Sigo probando Vue con material vue; Usé v-for para mostrar los objetos de la matriz en tarjetas separadas.
entonces en la template , se ve así:
<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> y los data se ven así:
fruits: [ {id: '1', name: 'Kiwi'}, {id: '2', name: 'Mango'}, {id: '3', name: 'Apple'}], showInfo: falseEsto es lo que quería hacer:
Por lo que hice anteriormente, cuando hago clic en el botón de la tarjeta Kiwi, también activa la visualización de intervalo en las otras tarjetas.
¿Cómo debo seguir con esto?
Reemplace boolean para showInfo con fruit.id o índice:
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>