loop through data and display a table with vue.js

vue_table.js

// ** This project demonstrates how to loop through a simple data set and display a table **

Commands for setup:

// initialize a simple  new vue project (simple webpack + vue-loader setup for quick prototyping)
vue init webpack-simple my_table

// install dependencies & run
cd my_table && yarn install && yarn run dev


// in App.vue
<template id='app'>
  <table>
  
    <thead>
      <th>Index</th>
      <th>Name</th>
      <th>Age</th>
    </thead>

    <tbody>
      <tr v-for='(person, index) in persons'>
        <td>{{ index }}</td>
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
      </tr>
    </tbody>

  </table>
</template>

<script>
   export default {
    name: 'HelloWorld',
    
    data(){
      return {
        // initial state
        persons: [
          {name: Max, age: 20},
          {name: Jan, age: 30},
          {name: Ana, age: 40}
        ]
      }
    }
}
</script>