Vue.js v-for nested in Table

Question

Probably a basic one, but I've been struggling for a while. I'm trying to create a Table component in Vue 2, populated by data using v-for.

I'd like it to be:
Head1 Head2 Head3 Head4
1 2 3 4
11 22 33 44

My best attempt:

  <table class="timeline-table">
  <thead>
    <tr v-for="(row, key, v) in rows">
      <th>{{ key }}</th>
      <th>{{ key }}</th>
      <th>{{ key }}</th>
      <th>{{ key }}</th>
    </tr>
  </thead>
    <tbody v-for="row in rows">
      <tr>
        <td>{{ row.Head1 }}</td>
        <td>{{ row.Head2 }}</td>
        <td>{{ row.Head3 }}</td>
        <td>{{ row.Head4 }}</td>
      </tr>
    </tbody>
  </table>

With Data structure as:

  rows: [{
    Head1: '1',
    Head2: '2',
    Head3: '3',
    Head4: '4'
  },
  {
    Head1: '11',
    Head2: '22',
    Head3: '33',
    Head4: '44'
  }]

Have tried various, such as rows[0], and nesting the v-for into a r in row, but no success.

Many thanks!

akuiper · Accepted Answer · 2017-11-28 23:03:04Z

3

In the header, you need v-for on th instead of tr, also you need to loop through keys in one row to create the header instead of loop through rows:

<table class="timeline-table" id="my-table">
  <thead>
    <tr>
      <th v-for="key in Object.keys(rows[0])">{{ key }}</th>
    </tr>
  </thead>
  <tbody v-for="row in rows">
    <tr>
      <td v-for="key in Object.keys(row)">{{ row[key] }}</td>
    </tr>
  </tbody>
</table>

See the fiddle here.

edited Nov 28, 2017 at 23:03

answered Nov 28, 2017 at 23:00

akuiper

216k33 gold badges362 silver badges379 bronze badges

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

Collectives™ on Stack Overflow

Vue.js v-for nested in Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related