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) => {
          


        

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>