JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
<main>
  <h1>User List</h1>

  <user-list :users="users"></user-list>
</main>

<script type="text/x-template" id="user-list-tmpl">
  <div class="users">
    <div class="user" v-for="user in users">
      <h3 v-text="user.name"></h3>
      <p v-text="user.company.name"></p>
      <div class="actions">
  			<a href="edit">Edit</a>
  			<a href="view">View</a>
  			<a href="delete">Delete</a>
			</div>
  	</div>
  </div>
</script>

JavaScript

new Vue({
	el: 'main',
  data: {
  	users: [],
  },
  components: {
  	'user-list': {
    	template: '#user-list-tmpl',
      props: ['users'],
    },
  },
  created: function() {
  	var root = this;
  	this.$http.get('https://jsonplaceholder.typicode.com/users').then(function(response) {
    	console.log(response.data);
      root.users = response.data;
    });
  }
})