Vue.js Create Dynamic Table Component

Vue.js Create Dynamic Table Component – Rendering dynamic data in react is very simple, we can use v-for for looping table rows. Here in this example we are going to explain how to display dynamic data in vue js. 

Vue.js Create Dynamic Table Component 

JS Part contains the following code-

<code>import Vue from 'vue';
export default {
data() {
    return {
    items: [
        {
            'id':'1',
            'name': 'John',
            'phone': '9832321***',
            'country': 'USA'
        },
        {
           'id':'2',
            'name': 'David',
            'phone': '9543231***',
            'country': 'CHINA'
        },
       {
           'id':'3',
            'name': 'Parthi',
            'phone': '9643261***',
            'country': 'INDIA'
        }
     ],
  }
}
}</code>

Now Let’s create view part and render the above data in simple table.

<code>  <table>
      <thead>
          <tr>
              <th>ID</th>
              <th>Name</th>
             <th>Phone</th>
              <th>Country</th>
          </tr>
      </thead>
      <tbody>
          <tr v-for="(item, index) in items" :key="index">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
             <td>{{item.phone}}</td>
              <td>{{item.country}}</td>
          </tr>
      </tbody>
    </table></code>

Using the above example we can display any object data in simple table.

Add Comment