Vue: Displaying Nested Data In A Table

I'm in the process of rewriting some older code, and using Vue as the replacement. It's all going great apart from changing one table that is templated using handlebars. Using hand

Solution 1:

Here is the relevant part of the template updated.

<tbody>
  <template v-for="item in data">
    <tr class="name-row" >
      <th class="name" colspan="3">{{item.key}}</th>
    </tr>
    <template v-for="subregion in item.values">
      <tr>
        <th class="group-name" colspan="4">{{subregion.key}}</th>
      </tr>
      <tr v-for="site in subregion.values">
        <td>{{site.site}}</td>
        <td>{{site.total}}</td>
        <td>
          <span>{{site.timestamp}}</span>
        </td>  
      </tr>
    </template>
  </template>
<tbody>

And the updated fiddle.

The main point is taking advantage of the template element to render more than one tr per iteration.