<tbody>
<tr @click="selectedRow(items[0],0)" v-bind:class="{lols: checkedIndex === 0}">
<td class="actions">
<span
style="cursor:pointer;font-size:20px;font-weight:bold;"
v-if="items.length > 1"
v-text="showAll ? '-' : '+'"
@click="showAll = !showAll">
</span>
</td>
<td>{{items[0].client }}</td>
<td>{{items[0].fromCity}}</td>
<td>{{items[0].toCity}}</td>
<td>{{items[0].date}}</td>
<td>{{items[0].prepayment}}</td>
<td>{{items[0].rate}}</td>
<td>{{items[0].type}}</td>
<td>{{items[0].status}}</td>
<td>{{items[0].logist}}</td>
<td>{{items[0].note}}</td>
</tr>
<template v-if="showAll">
<tr v-for="(n,index) in items.slice(1)" v-bind:key="n._id" @click="selectedRow(n,index)" v-bind:class="{lols: checkedIndex === index}">
<td class="actions"></td>
<td>{{n.client }}</td>
<td>{{n.fromCity}}</td>
<td>{{n.toCity}}</td>
<td>{{n.date}}</td>
<td>{{n.prepayment}}</td>
<td>{{n.rate}}</td>
<td>{{n.type}}</td>
<td>{{n.status}}</td>
<td>{{n.logist}}</td>
<td>{{n.note}}</td>
</tr>
</template>
</tbody>data: () => ({
checkedIndex:-1,
}),selectedRow(app,ind){
this.checkedIndex = this.checkedIndex === ind ? -1 : ind;
// eslint-disable-next-line no-console
console.log(this.checkedIndex);
}<tbody v-for="n in apps" v-bind:key="n.id">
<tr>
<td class="actions">
<span
v-if="n.length > 1"
v-text="showAll ? '-' : '+'"
@click="showAll = !showAll"
></span>
</td>
<td>{{n[0].client }}</td>
<td>{{n[0].fromCity}}</td>
<td>{{n[0].toCity}}</td>
<td>{{n[0].date}}</td>
<td>{{n[0].prepayment}}</td>
<td>{{n[0].rate}}</td>
<td>{{n[0].type}}</td>
<td>{{n[0].status}}</td>
<td>{{n[0].logist}}</td>
<td>{{n[0].note}}</td>
</tr>
<template v-if="showAll">
<td class="actions"></td>
<tr v-for="i in n.slice(1)" v-bind:key="i._id">
<td></td>
<td>{{i.client }}</td>
<td>{{i.fromCity}}</td>
<td>{{i.toCity}}</td>
<td>{{i.date}}</td>
<td>{{i.prepayment}}</td>
<td>{{i.rate}}</td>
<td>{{i.type}}</td>
<td>{{i.status}}</td>
<td>{{i.logist}}</td>
<td>{{i.note}}</td>
</tr>
</template>
data()=>{
return{
showAll:false
}}
</tbody>