CODEWITHSUNDEEP
html-tablevuejs2vue-component
MikroMike
MikroMike

Reputation: 45

how to build dynamic table with vue?

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?

Upvotes: 0

Views: 579

Answers (1)

Terry
Terry

Reputation: 66123

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>

Upvotes: 2

Related Questions