Vue+Firebase 条件渲染答案

【问题标题】：Vue+Firebase Conditional RenderingVue+Firebase 条件渲染
【发布时间】：2018-07-17 13:32:32
【问题描述】：

我正在使用 Vue + Firebase。 firebase 上的每个数据，都有isFinished: false/true 声明。我想打印 isFinished: false 数据。我如何用 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>

【问题讨论】：

标签： javascript firebase vue.js

【解决方案1】：

用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>

【讨论】：

是的！这正是我想要的。非常感谢！！

【解决方案2】：

<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>

将此添加到您的表中！

【讨论】：

它正在工作，但我不想要这个。我想 If isFinished equal false return data, but not false 跳过这个数据并且不打印那个。