[Vuejs]-<th> tag does not follow with the data loop

by

0👍

The problem is that you are using divs as the root element of the tbody. As they are rendered in the DOM, it takes out the td‘s space and the first loop ends up in the first column.

You can solve this by replacing div with template, since it does not render on final DOM output.

Here is a fix:

<tbody>
    <template v-for="values in objects">
        <template v-for="value in values">
            <tr v-for="item in value">
                <td scope="col"> {{ item.agency }} </td>
                <td scope="col"> {{ item.reference }} </td>
                <td scope="col"> {{ item.type }} </td>
                <td scope="col"> {{ item.category }} </td>
                <td scope="col"> {{ item.description }} </td>
                <td scope="col"> {{ item.submission }} </td>
                <td scope="col"> {{ item.starting_date }} </td>
                <td scope="col"> {{ item.closing_date }} </td>
                <td scope="col">
                    <a :href="item.link" target="_blank"> View </a>
                </td>
            </tr>
        </template>
    </template>
</tbody>

To make Vue/eslint stop warning about the missing key directive, you could add the following to the v-fors:

<template v-for="(values, i) in objects">
    <template v-for="(value, j) in values">
        <tr v-for="(item, k) in value" :key="`${i}.${j}.${k}`">

Leave a comment