表格中的 vue.js 条件渲染

Question

我有一个由vue填充的表，如果有数据，我想在其中显示行，如果没有数据，则显示“没有结果”的行。 这是jsfiddle 中的基本介绍。

为什么即使满足v-if条件， v-else行仍会继续显示？

Answer 1

不幸的是v-if和v-for不能一起工作。 您可以将v-if移高一级，如下所示：

<tbody v-if="my_tasks.length">
    <tr id="retriever-task-{{ index }}" v-for="(index, task) in my_tasks" >
        <td>{{ task.id }}</td>
        <td>{{ task.type }}</td>
        <td>{{ task.frequency }}</td>
        <td>{{ task.status }}</td>
        <td><i v-on:click="deleteTask(index, task.id)" class="fa fa-trash"></i></td>
    </tr>
</tbody>
<tbody v-else>
    <tr>
        <td colspan="6">No tasks found.</td>
    </tr>
</tbody>

您还可以使用伪元素template ：

<template v-if="my_tasks.length">
    <tr id="retriever-task-{{ index }}" v-for="(index, task) in my_tasks" >
        <td>{{ task.id }}</td>
        <td>{{ task.type }}</td>
        <td>{{ task.frequency }}</td>
        <td>{{ task.status }}</td>
        <td><i v-on:click="deleteTask(index, task.id)" class="fa fa-trash"></i></td>
    </tr>
</template>
<template v-else>
    <tr>
        <td colspan="6">No tasks found.</td>
    </tr>
</template>

Answer 2

来自 Vuejs 文档“v-else 元素必须紧跟在 v-if 或 v-show 元素之后 - 否则将无法识别。” - https://vuejs.org/guide/conditional.html 。 看起来 v-if 后面的附加 vue 数据绑定属性正在破坏它（例如 v-for 和 v-on）。

您可以使用 v-show 代替。 例如：

    <tr v-show="!my_tasks.length">
      <td colspan="6">No tasks found.</td>
    </tr>

Answer 3

yariash 关于v-if和v-for是正确的。 你可以这样做，因为他建议或者只是改变了v-else到的反向v-if ，即v-if="!my_tasks.length" 。