JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
      rel="stylesheet">
      
<div id='app'>
  <table class='table table-striped'>
    <thead>
      <tr>
        <td>ID</td>
        <td>Name</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for='user in users'>
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

new Vue({
  el: '#app',
  created: function () {
    var self = this;
    fetch('https://babakhanov.github.io/just-vue-it/users.json')
      .then(function(response){
        response.json().then(function(data){
          self.users = self.users.concat(data.users);
        })
      })
  },
  data: {
    users: []
  },
})