Delete blank rows from table

Viewed 35
<tr v-for="(value, key) in this.object" :key="key">
  <div v-if="value.item1 != null">
    <td width="400" class="alnleft">{{value.item1}}</td>
    <td width="50" class="alnright">{{value.item2}}</td>
  </div>
</tr>

With the v-if I am omitting values to print in tr. But above code printing black tr and unnecessary space is getting created . Please suggest how to get rid of this

1 Answers

You dont ever want to place a div as the child of a tr. You can prevent the div from being inserted by replacing it with template.

<tr v-for="(value, key) in this.object" :key="key">
    <template v-if="value.item1 != null">
        <td width="400" class="alnleft">{{value.item1}}</td>
        <td width="50" class="alnright">{{value.item2}}</td>
    </template>
</tr>

Does that fix your issue?

Related