Vue.js progress bar

Question

I'm using vue.js 2.0 I've got this method:

calculatePercentage(option) {
    let totalVotes = 0;

    this.poll.options.forEach((option) => {
        totalVotes+= option.votes.length;
    });

    return option.votes.length / totalVotes * 100;
}

This is my bootstrap progress bar:

<div class="span6">
    <div v-for="option in poll.options">
        <strong>{{ option.name }}</strong><span class="pull-right">{{ calculatePercentage(option) }}%</span>
        <div class="progress progress-danger active" aria-valuenow="12">
            <div class="bar" style="width: 15%;"></div>
        </div>
    </div>
</div>

So the calculatePercentage(option); is working properly. But how do I bind this to the style (style="width: 15%;") ?

Thanks a lot

Answer 1

You can bind inline style to vue data as explained here. All you need to do is return values from calculatePercentage and use it in style like following:

<div class="span6">
    <div v-for="option in poll.options">
        <strong>{{ option.name }}</strong><span class="pull-right">{{ calculatePercentage(option) }}%</span>
        <div class="progress progress-danger active" aria-valuenow="12">
            <div class="bar" v-bind:style="{width: calculatePercentage(option) + '%'}"></div>
        </div>
    </div>
</div>