Vue.jsプログレスバー

Question

私は、このメソッドを持っている：

calculatePercentage(option) { 
    let totalVotes = 0; 

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

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

これは私のブートストラッププログレスバーです：

<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> 

のでcalculatePercentage(option);が正常に動作しています。しかし、これをスタイル（style="width: 15%;"）にどのように結びつけるのですか？

どうもありがとう

Answer 1

hereが説明したようにあなたは、データをVUEインラインスタイルをバインドすることができます。あなたがする必要があるのはcalculatePercentageの値を返し、次のようなスタイルで使用するだけです：

<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>