表中的vue.js条件呈现

vue.js conditional rendering in tables

本文关键字：条件 js vue      更新时间：2023-09-26

我有一个由vue填充的表，如果有数据，我想在其中显示行，如果没有数据，则显示"无结果"的行。以下是jsfiddle中对它的基本介绍。

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

不幸的是，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>

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

yariash对v-if和v-for的看法是正确的。你可以按照他的建议去做，或者只是把v-else改成v-if的反面，即v-if="!my_tasks.length"。

相关文章：