Vue.js - インラインスタイルバインドを使用した動的プログレスバー

Question

"v-for"リストのソースデータに従って背景色を変更するプログレスバーを作成しています。データは次のとおりです。私はこれを試してみた

plants: [ 
    { name: 'Rosemary', sun: 7, water: 3, care: 3 }, 
    { name: 'Pepper', sun: 8, water: 4, care: 6 }, 
    ... 
    ] 

（0から10までの属性）：

<div class="card-bar-sun"> //Main grey bar 
    <span :style="{ width: calc(plant.sun * 10) + '%'}"></span> 
</div> 
... 

がどのようにこのための方法ロジックだろうか？

Answer 1

あなたの質問は完全に理解できませんでした。あなただけの割合をカルクする方法を探している場合は、これを使用することができます：

<div class="card-bar-sun"> 
    <span v-for="plant in plants" :style="{'width': calcBar(plant) + '%'}"></span> 
</div> 

のJsを：

calcBar(plant) { 
    //or more complicated stuff 
    return plant.sun *10 
}