CODEWITHSUNDEEP
htmlvue.js
Chris Smith
Chris Smith

Reputation: 409

VueJS: V-for not displaying as desired

How can I get v-for to display table data in the same form as the following html:

<tr>
    <th scope="col">Name</th>
    <th scope="col">Price</th>
    <th scope="col">Product ID</th>
    <th></th>
</tr>

Currently I am using the following vue v-for code(below) but it is adding the table header(th) one below another. I would like the table header to display side by side. 

<tr v-for="(column, index) in schema" :key="index">
    <th scope="col">{{column}}</th>
</tr>

Upvotes: 2

Views: 2462

Answers (2)

Kenan Balija
Kenan Balija

Reputation: 703

You just need to place v-for on the element you want to repeat, not it's parent.

For loop should be put on <th></th>

<tr>
    <th v-for="(column, index) in schema" :key="index">{{column}}</th>
</tr>

Here is the official vue doc for list rendering: https://v2.vuejs.org/v2/guide/list.html

Upvotes: 4

Tony Tom
Tony Tom

Reputation: 1583

bind grid header and data separately.

 <template>
 <table>
   <thead>
   <tr>
     <th v-for="(header,index) in gridHeader" :key="index">
      {{header.displayName}}
     </th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(data, index) in gridData" :key="index" >
      <td>
      {{data.name}}
      </td>
      <td>{{data.age}}
      </td>
      <td>{{data.place}}
      </td>
    </tr>
  </tbody>
  </table>              
</template>

<script lang="ts">
import Vue from 'vue';    
export default class HelloWorld extends Vue {
  private gridHeader: object[] = [
        {name: 'Name', displayName: 'Name'},
        {name: 'Age', displayName: 'Age'},
        {name: 'Place', displayName: 'Place'}
    ];
  private gridData: any =[{name:'Tony',age:'31',place:'India'},
    {name:'Linju',age:'26',place:'India'},
    {name:'Nysa',age:'12',place:'India'}];
};
</script>
<style scoped>
</style>

Upvotes: 1

Related Questions