Vue

by Dmitri Ganenco

HTML

<div id="app">
  <div class="container">
    <div>
      <form id="the-form" action="#">
        <h1 class="text-center">{{Title}}</h1>
        <div v-for="(candidate) in candidates" :key="candidate.topic_id">
          <label>
            <input type="radio" class="option-input radio" value="1" id="radio" name="example" />
            {{candidate.candidate_name}}
          </label>
        </div>
        <button>Submit vote</button>
      </form>
    </div>
  </div>
</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;
}

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

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

Vue

new Vue({
  el: "#app",
  data() {
      return {
        selected: [], // Must be an array reference!
        Title: 'Providence Class Captain Election',
        candidates: [
            {
                candidate_name: 'Babangida', 
                candidate_party: 'pdp', 
                vote_count: 0,
                vote_id:'1'
                },

            {
                candidate_name: 'Rochas', 
                candidate_party: 'Anpp', 
                vote_count: 0,
                vote_id:'2'
                },
            {
                candidate_name: 'Ajimobi', 
                candidate_party: 'Apc', 
                vote_count: 0,
                vote_id:'3'
                },
            {
                candidate_name: 'Buhari', 
                candidate_party: 'Apc', 
                vote_count: 0,
                vote_id:'4'
                }

        ]
      }
    }
})