JSFiddle - React, Tailwind, and code Playground

by Danish Farman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.0/vue-resource.js"></script>
<div id="vueApp">
  <persons-information :persons="persons"></persons-information>
</div>

JavaScript

var personsInformation = Vue.component("persons-information", {
  props: ["persons"],
  template: "<div>" +
    "<table class='table table-striped'>" +
    "<tr v-for='(person, index) in persons'>" +
    "<td>{{person.designation}} " +
    "{{person.name}} is {{person.age}} years old. " +
    "<button v-on:click='alert(index)'>View Person!</button></td>" +
    "</tr>" +
    "</table>" +
    "</div>",
  methods: {
    alert: function(index) {
		var person = this.persons[index];
      alert(person.name + " is " + person.age + " years old.");
    }
  }
});

var vm = new Vue({
  el: "#vueApp",
  data: {
    persons: [{
      designation: "Software Developer",
      name: "Danish Farman",
      age: 31

    }, {
      designation: "Lead Designer",
      name: "Emily Smith",
      age: 21

    }, {
      designation: "Junior Developer",
      name: "Jonathan Thorpe",
      age: 26
    }]
  }
});