JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://unpkg.com/vue"></script>

<div id="app-7">
  <my-table v-bind:grocery-list="groceryList"></my-table>
</div>

<script type="text/x-template" id="table-template">
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
      </todo-item>
    </tbody>
  </table>
</script>


<script type="text/x-template" id="row-template">
  <tr>
    <td>{{ todo.id }}</td>
    <td>{{ todo.text }}</td>
  </tr>
</script>

JavaScript

Vue.component('todo-item', {
  props: ['todo'],
  template: '#row-template'
})

Vue.component('my-table', {
  props: ['groceryList'],
  template: '#table-template'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [{
      id: 0,
      text: 'Vegetables'
    }, {
      id: 1,
      text: 'Cheese'
    }, {
      id: 2,
      text: 'Whatever else humans are supposed to eat'
    }]
  }
})