Vue: Displaying nested data in a table

Question

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 handlebars nested {{each}} I can work down through the nested data structure while displaying the relevant data in table rows: e.g. using handlebars: https://jsfiddle.net/6dsruo40/1/

I cant figure out how to do the same using Vue with v-for etc.

Fiddle with as mush as I have: https://jsfiddle.net/cj7go6bv/

I don't know how to work through the data structure while maintaining the <tr>s like in handlebars

This is the data structure I'm using, but it is flexible:

var data = [
  {
key: "Region 1",
values: [
  {
    key: "Sub region 1",
    values: [
      {
        site: "Site A",
        timestamp: 1507246300935,
        total: 3,
      },
      {
        site: "Site B",
        timestamp: 1507246300818,
        total: 0,
      },
      {
        site: "Site C",
        timestamp: 1507246300936,
        total: 0,
      }
    ],
  },
  {
    key: "Sub region 2",
    values: [
      {
        site: "Site A",
        timestamp: 1507246301442,
        total: 20,
      },
      {
        site: "Site B",
        timestamp: 1507246301788,
        total: 5,
      }
    ]
   },
  {
    key: "Sub region 3",
    values: [
      {
        site: "Site A",
        timestamp: 1507246302503,
        total: 66,
      },
      {
        site: "Site B",
        timestamp: 1507246302783,
        total: 2
      }
    ]
  }
]
   },
   {
key: "Region 2",
values: [
  {
    key: "Sub region 1",
    values: [
      {
        site: "Site A",
        timestamp: 1507246306789,
        total: 0,
      },
      {
        site: "Site B",
        timestamp: 1507246307439,
        total: 6,
      }
    ]
  },
  {
    key: "Sub region 2",
    values: [
      {
        site: "Site A",
        timestamp: 1507246308269,
        total: 10,
      },
      {
        site: "Site B",
        timestamp: 1507246308683,
        total: 30,
      }
    ]
  }
]
}
];

The Vue code I have is very modest so far:

Vue.component('project-table', {
  template: '#table-template',
  props: {
    data: Array
  }
});

var app = new Vue({
    el: '#table-container',
    data: {data: sites},
    });

And the template:

<div id="table-container">
  <project-table :data="data"></project-table>
</div>
    <script id="table-template" type="text/x-template">
        <table class="u-full-width">
            <thead>
                <tr>
                <th>Project location</th>
                <th>Total</th>
                <th>Timestamp</th>
            </tr>
        </thead>
        <tbody>
        <tr class="name-row" v-for="item in data">
            <th class="name" colspan="3">{{item.key}}</th>
        </tr>
        <tbody>
    </table>
</script>

What is the mechanism in Vue for displaying a table like is done in Handlebars? Thanks!

Bert · Accepted Answer · 2017-10-06 04:08:34Z

10

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.

answered Oct 6, 2017 at 4:08

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

K Groll Over a year ago

That is fantastic @bert! So simple. <template> is like a transparent wrapper of sorts is it? I really struggled to find relevant info on google or SO. Thanks!

Alexander Kim Over a year ago

Is using template inside a template allowed?

Bert Over a year ago

@AlexanderKim Yep.

SNO Over a year ago

Not the clean way. Prettier will throw exceptions: Elements in iteration expect to have 'v-bind:key' directives, '<template>' cannot be keyed. Place the key on real elements instead

Flint Over a year ago

it's easy to implement

Collectives™ on Stack Overflow

Vue: Displaying nested data in a table

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related