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