user101289 user101289 - 4 months ago 32
Javascript Question

vue.js conditional rendering in tables

I have a table populate by

vue
where I want to show rows if there's data, or a row with "no results" if there's no data. Here's a basic look at it in jsfiddle: https://jsfiddle.net/ox0ozs5g/1/.

Why does the
v-else
row continue to show even when the
v-if
condition is met?

Answer

Unfortunetelly v-if and v-for are not working together. You could move v-if one level higher, like this:

<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>
Comments