Vue

by Alex Kyriakidis

HTML

<div id="app">
  <div class="container">
    <ul class="list-group">
      <planet
      v-for="planet in planets" 
      :key="planet.name" 
      :planet="planet"/>
    </ul>
  </div>
</div>
<template id="planet-template">
  <li  class="list-group-item">
    Planet: {{ planet.name }}
    Visited {{ planet.visits }} time(s).
    <button v-show="canBeVisited" @click="visit" class="btn btn-default">
      Visit
    </button>
    <span v-show="planet.visits > 0" class="pull-right">🚀</span>
</li>
</template>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.component('planet', {
  template: '#planet-template',
  props: ['planet'],
  methods: {
    visit () {
      this.planet.visits++;
    },
  },
  computed: {
    canBeVisited () {
      return this.planet.visits < 3
    }
  }
})

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