title: Vue: Displaying nested data in a table
body: <p>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.</p>
  
  <p>Using handlebars nested <code>{{each}}</code> I can work down through the nested data structure while displaying the relevant data in table rows: e.g. using handlebars: <a href="https://jsfiddle.net/6dsruo40/1/" rel="noreferrer">https://jsfiddle.net/6dsruo40/1/</a></p>
  
  <p>I cant figure out how to do the same using Vue with <code>v-for</code> etc.</p>
  
  <p>Fiddle with as mush as I have: <a href="https://jsfiddle.net/cj7go6bv/" rel="noreferrer">https://jsfiddle.net/cj7go6bv/</a></p>
  
  <p>I don't know how to work through the data structure while maintaining the <code>&lt;tr&gt;</code>s like in handlebars</p>
  
  <p>This is the data structure I'm using, but it is flexible:</p>
  
  <pre><code>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,
        }
      ]
    }
  ]
  }
  ];
  </code></pre>
  
  <p>The Vue code I have is very modest so far:</p>
  
  <pre><code>Vue.component('project-table', {
    template: '#table-template',
    props: {
      data: Array
    }
  });
  
  var app = new Vue({
      el: '#table-container',
      data: {data: sites},
      });
  </code></pre>
  
  <p>And the template:</p>
  
  <pre><code>&lt;div id="table-container"&gt;
    &lt;project-table :data="data"&gt;&lt;/project-table&gt;
  &lt;/div&gt;
      &lt;script id="table-template" type="text/x-template"&gt;
          &lt;table class="u-full-width"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                  &lt;th&gt;Project location&lt;/th&gt;
                  &lt;th&gt;Total&lt;/th&gt;
                  &lt;th&gt;Timestamp&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr class="name-row" v-for="item in data"&gt;
              &lt;th class="name" colspan="3"&gt;{{item.key}}&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tbody&gt;
      &lt;/table&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>What is the mechanism in Vue for displaying a table like is done in Handlebars? Thanks!</p>