过滤b表中的#row-details

Question

我正在尝试显示b表中的任务和属于该任务的子任务。使用滤镜没有很多运气，我不确定在哪里放"v-if";声明。

<b-table :items="tasks" :fields="fields" responsive="sm">
<template #cell(sub)="row">
<b-form-checkbox v-if="checkforsubtasks(row.item.id)" @change="row.toggleDetails" ></b-form-checkbox>
</template>
<template #cell(task)="row">
{{ row.item.task.length &lt; 40 ? row.item.task : row.item.task.substring(0,40) + "..." }}
</template>
<template #cell(priority)="row">
<span v-if="row.item.priority === 'Critical'" class="badge badge-danger">{{ row.item.priority }}</span>
<span v-else-if="row.item.priority === 'Significant'" class="badge badge-warning">{{ row.item.priority }}</span>
<span v-else-if="row.item.priority === 'Moderate'" class="badge badge-success">{{ row.item.priority }}</span>
</template>
<template #cell(status)="row">
<strong >{{ row.item.status }}</strong>
</template>
<template #cell(duedate)="row">
{{ (row.item.duedate || "").substring(5) }}
</template>
<template #cell(actions)="row">
<span  @click=" $bvModal.show('modal-newsubtask'); assignsubtask(row.item) ">
<i class="fas fa-plus" v-b-tooltip.hover.botom title="add subtask to this task"></i>
</span>
<span>
<i class="far fa-window-maximize ml-3" v-b-tooltip.hover.botom title="maximize and see task in new window"></i>
</span>

</template>

<template #row-details="row">
<b-card >
<b-table :items="subtasks" outlined :fields="fields" thead-class="d-none" [[ v-if="subtask.subtaskof === row.item.id" ]] responsive="sm"></b-table>

<!-- This will sow all subtasks in this components state 
but I need it to show only subtasks that have subtaskof 
same as task.id I am showing subtasks for -->


</b-card>
</template>
</b-table>

这将在此组件状态下播种所有子任务，但我需要它只显示具有与任务相同的子任务的子任务。我为

显示子任务

Answer 1

我解决了这个

<template #row-details="row">
<b-table 
:items="subfilter(row.item)" outlined 
:fields="fields" 
thead-class="d-none" 
responsive="sm"></b-table>
</template>
<script>
methods: {
subfilter(item){
return  this.tasks.filter((mysubtask) => mysubtask.subtaskof == item.id);
}
}
</script>