[英]Vue+Firebase Conditional Rendering
我正在通过Vue + Firebase工作。 Firebase上的每个数据都有isFinished: false/true
语句。 我想打印isFinished:错误数据。 如何使用v-for打印它们? 这是我的代码:
<tbody>
<tr v-for="(item, index) in works" :key="index.id" class="list-table">
<td id="checkbox-td" style="width: 24px">
<span class="list-checkbox" @click="clickCheckbox(index, item)"></span>
</td>
<td>
{{item.name}}
</td>
<td style="text-align: right;">
{{item.username}}<br>
<span style="font-size:10px;">{{item.date}} {{item.hour}}</span>
</td>
</tr>
</tbody>
用template
包装项目,然后在其中添加v-for
:
<tbody>
<template v-for="(item, index) in works" :key="index.id">
<tr class="list-table" v-if="!item.isFinished">
<td id="checkbox-td" style="width: 24px">
<span class="list-checkbox" @click="clickCheckbox(index, item)"></span>
</td>
<td>
{{item.name}}
</td>
<td style="text-align: right;">
{{item.username}}<br>
<span style="font-size:10px;">{{item.date}} {{item.hour}}</span>
</td>
</tr>
</template>
</tbody>
<th>Finished</th>
<tbody>
<tr v-for="(item, index) in works" :key="index.id" class="list-table">
<td data-label="Finished">{{item.isFinished? 'Finished' : 'Not Finished'}}</td>
</tr>
</tbody>
将此添加到您的表!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.