Skip to content

Instantly share code, notes, and snippets.

@mzilverberg mzilverberg/_vue.poll.html Secret
Last active Mar 21, 2018

Embed
What would you like to do?
Percentages example: simple VueJS demo poll
<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>
computed: {
// Count total votes and percentage
totalVotes: function() {
return this.sum(this.items, "votes");
},
totalPercentage: function() {
return this.sum(this.items, "percentage");
}
}
data: {
items: [
{ name: 1, votes: 0, percentage: 0 },
{ name: 2, votes: 0, percentage: 0 },
{ name: 3, votes: 0, percentage: 0 }
]
}
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]);
}
}
vote: function(item) {
// Update value and recalculate percentages
item.votes += 1;
this.calc();
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.