vue.js条件呈现在表

Question

我有一个表填充vue我想要显示行如果有数据，或者一行“没有结果”，如果没有数据。以下是jsfiddle中的基本视图：https://jsfiddle.net/ox0ozs5g/1/。

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

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> 

您还可以使用pseudoelement 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-其他元素必须紧跟在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”。