@ -143,6 +143,22 @@ var vm = new Vue({
computed: {
done: function () {
return this.total - this.remaining
},
achievement: function () {
if (this.total == 0) {
return 0;
} else {
return (this.total - this.remaining) / this.total * 100
}
progressColor: function () {
if (this.achievement < 30) {
return 'is-danger'
} else if (this.achievement < 70) {
return 'is-warning'
return 'is-primary'
});
@ -14,7 +14,7 @@
</p>
<ul class="menu-list">
<li>
<progress class="progress is-primary" value="15" max="100">30%</progress>
<progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
</li>
</ul>