表格中的 vue.js 条件渲染

Posted 2023-02-22

【中文标题】表格中的 vue.js 条件渲染

【英文标题】：vue.js conditional rendering in tables

【发布时间】：2016-12-01 19:32:06

【问题描述】：

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

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

【参考方案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>

【讨论】：

我忘了这个！！顺便说一句，你拯救了我的夜晚@Randall，也感谢 +1 的问题

如果每一列在包含的元素和操作按钮等方面都不同，这很快就会变成 v-else-if 地狱，还有更好的方法吗？

在这种情况下，您可能应该将该行移至子组件。

【参考方案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>

【讨论】：

不，这与它无关。 “必须立即跟随”的表述是指同一级别的 HTML 元素。 Wahtever 嵌套在里面，在那个上下文中无关紧要。只有同一级别的v-if 才是问题所在，正如上面的 yariash 解释的那样。其他指令（v-on 等）也可以。

谢谢。但是，在 OP 的示例中使用 v-show 效果很好。

【参考方案3】：

yariash 关于v-if 和v-for 是正确的。您可以按照他的建议进行操作，或者将v-else 更改为v-if 的反面，即v-if="!my_tasks.length"。