[Vuejs]-How to display details after clicking on table's cell filled by v-for?

by

0👍

what you can do is something like this to show details of each row next to it if needed

<template v-for="(value,key) in matches">
 <tr v-bind:key="(value,key)">
        <td v-on:click="toggleData(value)">{{value.match_id}}</td>
        <td>{{value.duration}}</td>
        <td>{{value.start_time}}</td>
        ...
        <match ref="match"></match>
 </tr>
 <tr v-bind:key="`${key}_details`" v-if="details[value.match_id]">
      ... show whatever you want 
 </tr>
</template>

and in toggleData(value)
if not present add it else remove it

this.details[value.match_id] = value // if single
this.details[value.match_id] = []    // OR if multiple
this.details[value.match_id].push(value)

Leave a comment