Всем привет. Вывожу через template vue компонента две таблицы.
Одна вложена в другую.
при нажатии на дату в верхней таблице, должна отображаться вложенная в нее, той же даты.
Но к сожалению никак не могу понять, как связать кнопку с конкретным значением, ибо при нажатии на любую из них, открываются вообще все вложенные таблицы во всех датах.
Очень прошу подсказать, как сделать правильно, чтобы по нажатию на кнопку открывалась именно только конкретная дата.
<div v-for="column in orders">
<table class="table table-bordered">
<tr class="table-active">
<th>Дата</th>
<th>Отменено</th>
<th>В резерве</th>
<th>Выдано</th>
<th>Всего</th>
</tr>
<tr>
<td><button type="button" class="btn btn-outline-primary dropdown-toggle" v-on:click="showValues = !showValues">{{column.orderdate}}</button></td>
<td>{{column.cancelled}}</td>
<td>{{column.reserved}}</td>
<td>{{column.delivered}}</td>
<td>{{column.ordersumm}}</td>
</tr>
</table>
<div >
<template v-for="item in column.ordersperdate" v-if="showValues">
<table class="table">
<tr>
<th>Заказ №</th>
<th>ID Магазина</th>
<th style="width: 180px;">Статус</th>
<th></th>
</tr>
<tr >
<td>{{item.orderid}}</td>
<td>{{item.storeid}}</td>
<td>{{item.status}}</td>
<td><button type="button" class="btn btn-primary">Подробности</button></td>
</tr>
</table>
</template>
</div>
</div>