Vue

by Alex Kyriakidis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="app" class="container" @keydown.esc.prevent="clear">
  <h1>Elections</h1>
  <ul class="list-group">
    <li v-for="candidate in candidatesOrdered" :key="candidate.name" class="list-group-item">
      {{candidate.name}} {{candidate.votes}}
      <!-- increase votes 'on:click'-->
      <button class="btn btn-default" @click="vote(candidate)">Vote</button>
    </li>
  </ul>
  <h2>Our mayor is {{ mayor.name }}</h2>
</div>

Vue

var vm = new Vue({
  el: '#app',
  data: {
    candidates: [
      {name: "Violet", votes: 0},
      {name: "Dash", votes: 0},
      {name: "Jack Jack", votes: 0},
      {name: "Elastigirl", votes: 0},
      {name: "Mr. Incredible", votes: 0},
    ]
  },
  computed: {
  	candidatesOrdered () {
    	return [...this.candidates].sort((a, b) => b.votes - a.votes)
    },
    mayor () {
    	return this.candidatesOrdered[0]
    }
  },
  methods: {
  	vote (candidate) {
    	candidate.votes++
    },
    clear () {
      this.candidates = this.candidates.map(candidate => {
      	candidate.votes = 0
        return candidate
      })
    }
  }
})