Vue

by mzilverberg

HTML

<div id="app">
  <h2>Times clicked: {{ clicks }}</h2>
  <button v-on:click="countClicks()">
		Click me!
	</button>
	<ol>
		<li v-for="item in items" v-bind:class="{ done: item.done }" v-if="item.enabled">
			{{ item.name }} <span>({{ item.clicks }}/{{ item.target }})</span>
		</li>
	</ol>
</div>

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;
}
li.done {
	text-decoration: line-through;
	color: #666;
}

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

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

Vue

new Vue({
  el: "#app",
  data: {
    clicks: 0,
		items: [
			{ name: "#1", clicks: 0, target: 3, enabled: true, done: false },
			{ name: "#2", clicks: 0, target: 30, enabled: false, done: false, unlockAt: 10}
		]
  },
  methods: {
  	countClicks: function() {
			// Store `this` for nested use
			var vue = this;
			// Increment total clicks
			vue.clicks++;
			// Count clicks for each item
			// Enable them when reaching unlockAt value
			// Mark them as done when reaching target value
    	vue.$data.items.forEach(function(item, index) {
				if(item.enabled) {
					if(item.clicks < item.target) {
						item.clicks++;
					}
					if(item.clicks === item.target) item.done = true;
				// Unlock new items
				} else if(item.unlockAt === vue.clicks) {
					item.enabled = true;
				}
			});
    }
  }
})