テーブル内のvue.js条件付きレンダリング

Question

データがある場合は行を表示したい場合はvueのテーブルを作成し、データがない場合は「結果がない」行を作成します。 jsfiddle：https://jsfiddle.net/ox0ozs5g/1/の基本的な見方があります。

の条件が満たされても、なぜv-else行が表示され続けますか？

Answer 1

残念ながらv-ifとv-forは連携していません。 V-他の要素は、直ちにV-IFまたはに従う必要があります」Vuejsドキュメントから

<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

：

<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を使用することができます。このようにあなたは、v-if 1レベル移動することができます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

y-ifはv-ifとv-forについてです。彼が示唆したように、またはv-elseをv-ifの逆に、つまりv-if = "！my_tasks.length"に変更できます。