how to build dynamic table with vue?

Question

I tried to find the way build table from the following data property:

   data(){
   return {
       headlist: [
    {row: ID},
    {row: Name},
    {row: Title},
    {row: Description },
    {row: Actions }
    ],
    
    }

Template code:

    <table class="table table-bordered">
          <thead>
          <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Title</th>
              <th>Description</th>
              <th>Actions</th>
          </tr>

Now tried to replace to :

           <thead>
           <tr v-repeat="headlist ">
              <th>{{row}}</th>
          </tr>
          </thead>

Found example from https://012.vuejs.org/guide/list.html

What is wrong my code?

tony19 · Accepted Answer · 2022-07-15 22:30:43Z

2

That's the documentation for the older version of VueJS. You shouldn't be referring to that. Also, you should be using the v-for directive:

<th v-for="(entry, i) in headlist" v-bind:key="i">
  {{ entry.row }}
</th>

Proof-of-concept:

new Vue({
  el: '#app',
  data: function() {
    return {
      headlist: [{
          row: 'ID'
        },
        {
          row: 'Name'
        },
        {
          row: 'Title'
        },
        {
          row: 'Description'
        },
        {
          row: 'Actions'
        }
      ],
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th v-for="(entry, i) in headlist" v-bind:key="i">
          {{ entry.row }}
        </th>
      </tr>
    </thead>
  </table>
</div>

edited Jul 15, 2022 at 22:30

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 11, 2020 at 8:56

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

1 Comment

MikroMike Over a year ago

Thanks, first I did not get that code work, but problem was line under my Array. bodylist: [skillset.id, skillset.name, skillset.title, skillset.body, <- this was problem. Your code work perfectly.

Collectives™ on Stack Overflow

how to build dynamic table with vue?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related