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="{
        winning: mayor === candidate,
        losing: loser === candidate
      }"
      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>

CSS

.winning {
  color: #44b492;
  font-weight: bold;
}

.losing {
  color: red;
}

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]
    },
    loser () {
    	return this.candidatesOrdered[this.candidatesOrdered.length - 1]
    }
  },
  methods: {
  	vote (candidate) {
    	candidate.votes++
    },
    clear () {
      this.candidates = this.candidates.map(candidate => {
      	candidate.votes = 0
        return candidate
      })
    }
  }
})