I need to put some data in a html table. But when I attempt it I get the header row duplicating itself multiple times.

**Data:**

```
export const rates = [
  {
    lvrLow: 0.8,
    loanRanges: [
      {
        loanLow: 0,
        loanHigh: 300000.0,
      },
      {
        loanLow: 300000.01,
        loanHigh: 500000.0,
      },
    ],
  },
  {
    lvrLow: 0.95,
    loanRanges: [
      {
        loanLow: 0,
        loanHigh: 300000.0,
      },
      {
        loanLow: 300000.01,
        loanHigh: 500000.0,
      },
    ],
  },
];

```

**Vuejs Table row:**

```
 <tr v-for="item in rates" :key="item.id">
        <th>Low LVR</th>
        <th>High LVR</th>
        <th
          class="text-start"
          v-for="range in item.loanRanges"
          :key="range.id"
          colspan="1"
        >
          {{ range.loanLow }}
        </th>
        <th
          class="text-start"
          v-for="range in item.loanRanges"
          :key="range.id"
          colspan="1"
        >
          {{ range.loanHigh }}
        </th>
      </tr>

```

**This is the layout I'm trying to achieve:**

```
      <tr>
            <th>Low LVR</th>
            <th>High LVR</th>
            <th>
                0
            </th>
            <th>
                 300000.00
            </th>
  <th>
                 300000.01
            </th>

             <th>
                500000.00
            </th>
          </tr>

```

But with the vuejs I have above, I get the same row duplicating itself multiple times.

[![enter image description here](https://i.stack.imgur.com/hMf20.png)](https://i.stack.imgur.com/hMf20.png)

How do I adjust this so it only shows the first loan Range as the header of the table?

It should display as follows:

[![enter image description here](https://i.stack.imgur.com/wnQgp.png)](https://i.stack.imgur.com/wnQgp.png)