user101289 user101289 - 1 year ago 114
Javascript Question

vue.js conditional rendering in tables

I have a table populate by

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:

Why does the
row continue to show even when the
condition is met?

Answer Source

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>{{ }}</td>
        <td>{{ task.type }}</td>
        <td>{{ task.frequency }}</td>
        <td>{{ task.status }}</td>
        <td><i v-on:click="deleteTask(index," class="fa fa-trash"></i></td>
<tbody v-else>
        <td colspan="6">No tasks found.</td>