JSFiddle - React, Tailwind, and code Playground

by Seongkuk Park

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.1.0/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="app">
  <h1>Where would like to go</h1>
  <ul class="list-group">
    <planet v-for="(history, index) in histories" :obj="{ name: history.name, visits: history.visits, index: index }"></planet>
  </ul>
</div>
<br>

CSS

#app {
  margin: 0 auto;
  max-width: 768px;
  width: 100%;
}

JavaScript

Vue.component('planet', {
  props: ['obj'],
  template: `
    <li class="list-group-item">
      Planet: {{ obj.name }} Visited {{ obj.visits }} time(s).
      <button type="button" class="btn btn-default" v-on:click="count">Visit</button>
    </li>
  `,
  methods: {
    count() {
      console.log(this.obj.visits);
      this.obj.visits++;
    }
  }
})

new Vue({
  el: '#app',
  data: {
    histories: [
      {
        name: 'Mercury',
        visits: 0
      },
      {
        name: 'Venus',
        visits: 0
      },
      {
        name: 'Mars',
        visits: 0
      },
      {
        name: 'Jupiter',
        visits: 0
      }
    ]
  }
})