JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div id="app">

  <div id="container">
    <div>remain: {{ visitCount }}</div>
    <ul>
      <!-- init component -->
      <planet v-for="planet in planets" :planet="planet" :visitCount="visitCount"></planet>
    </ul>
  </div>
  <!-- // #container -->
  
</div>
<!-- // #app -->


<!-- templates -->
<template id="planet-template">
  <li>
    name: {{ planet.name }} / visited: {{ planet.visit }}
    <button v-if="isRemain" @click="toVisit">visit</button>
  </li>
</template>

JavaScript

Vue.component('planet', {
	template: '#planet-template',
  props: ['planet', 'visitCount'],
  data: {
  	visitCount: 3
  },
  methods: {
  	isRemain: function() {
    	return this.visiteCount > 0
    },
    toVisit: function() {
      this.planet.visit++;
      this.visiteCount--;      
    }
  }
});

new Vue({
	el: '#app',
  data: {
  	planets: [
    	{
      	name: 'aa',
        visit: 0
      },
      {
      	name: 'bb',
        visit: 0
      },
      {
      	name: 'cc',
        visit: 0
      },
      {
      	name: 'dd',
        visit: 0
      },
    ],
    visitCount: 3
  }
});