Percentages example: simple VueJS demo poll

_vue.poll.html

<div id="poll" class="c-table c-table--scrollable">

  <table>
    <thead>
      <tr>
        <th scope="col">Option</th>
        <th scope="col">Votes</th>
        <th scope="col" colspan="2">Percentage</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <th scope="row">{{ item.name }}</th>
        <td>{{ item.votes }}</td>
        <td>{{ item.percentage }}%</td>
        <td>
          <button class="c-btn c-btn--tertiairy" v-on:click="vote(item)">Vote!</button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td class="total">{{ totalVotes }}</td>
        <td class="total-percentage" colspan="2">{{ totalPercentage }}%</td>
      </tr>
    </tfoot>
  </table>
  
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>
<script src="https://cdn.rawgit.com/mzilverberg/Percentages/master/dist/js/Percentages.min.js"></script>
<script>
// Allow debugging in Chrome DevTools
Vue.config.devtools = true;
// Initiate 'poll'
var poll = new Vue({
  el: "#poll",
  data: {
    items: [
      { name: 1, votes: 0, percentage: 0 },
      { name: 2, votes: 0, percentage: 0 },
      { name: 3, votes: 0, percentage: 0 }
    ]
  },
  computed: {
    // Count total votes and percentage
    totalVotes: function() {
      return this.sum(this.items, "votes");
    },
    totalPercentage: function() {
      return this.sum(this.items, "percentage");
    }
  },
  methods: {
    calc: function() {
      var votes = [],
        i = 0,
        j = 0;
      // Store votes in an array we can use with Percentages.js
      for (i; i < this.items.length; i++) {
        votes.push(this.items[i].votes);
      }
      // Set percentage values
      var percentages = new Percentages(votes).corrected;
      for (j; j < percentages.length; j++) {
        this.$set(this.items[j], "percentage", percentages[j]);
      }
    },
    sum: function(array, objProp) {
      var count = 0;
      array.map(function(item) {
        count += item[objProp];
      });
      return count;
    },
    vote: function(item) {
      // Update value and recalculate percentages
      item.votes += 1;
      this.calc();
    }
  },
  // If you start with values other than 0, you can calculate percentages on initiation like so
  created: function() {
    this.calc();
  }
});
</script>

snippet.computed.js

computed: {
  // Count total votes and percentage
  totalVotes: function() {
    return this.sum(this.items, "votes");
  },
  totalPercentage: function() {
    return this.sum(this.items, "percentage");
  }
}

snippet.data.js

data: {
  items: [
    { name: 1, votes: 0, percentage: 0 },
    { name: 2, votes: 0, percentage: 0 },
    { name: 3, votes: 0, percentage: 0 }
  ]
}

snippet.fn.calc.js

calc: function() {
  var votes = [],
    i = 0,
    j = 0;
  // Store votes in an array we can use with Percentages.js
  for (i; i < this.items.length; i++) {
    votes.push(this.items[i].votes);
  }
  // Set percentage values
  var percentages = new Percentages(votes).corrected;
  for (j; j < percentages.length; j++) {
    this.$set(this.items[j], "percentage", percentages[j]);
  }
}

snippet.fn.vote.js

vote: function(item) {
  // Update value and recalculate percentages
  item.votes += 1;
  this.calc();
}

table.tbody.html

<tbody>
  <tr v-for="item in items">
    <th scope="row">{{ item.name }}</th>
    <td>{{ item.votes }}</td>
    <td>{{ item.percentage }}%</td>
    <td>
      <button class="c-btn c-btn--tertiairy" v-on:click="vote(item)">Vote!</button>
    </td>
  </tr>
</tbody>

table.tfoot.html

<tfoot>
  <tr>
    <th scope="row">Total</th>
    <td class="total">{{ totalVotes }}</td>
    <td class="total-percentage" colspan="2">{{ totalPercentage }}%</td>
  </tr>
</tfoot>