VueJSの要素に動的スタイルを渡す

Question

完了したタスクの割合を追跡するためのプログレスバーを作成しようとしています。私はv-bindしたい：このバーの進行を制御するために、スタイルを渡して{width：dynamicWidth + '％'}渡します。これまでのところ私は、私も見にDOMに要素を追加私は表示するバーにしたい、と私は

export default{ 
    data: function() { 
     return { 
     numQuotes: dataBus.numQuotes, 
     numberA: 30, 
     barWidth: { 
      width: this.barWidthCalculated +'%' 
     } 
     } 
    }, 
    computed: { 
     barWidthCalculated: function(){ 
     return this.numQuotes * 10; 
     } 
    } 
    } 

データオブジェクトに私のダイナミックなスタイルを設定している割合完全に戻ります計算された変数を作成しました起こっていたこと。

私のバーは100％に固定されたままですが、DOMでは補間がありません。また、私のデータセクションに別のNUMBER変数を設定し、それを私のwidthプロパティに渡そうとしましたが、DOMにはレンダリングも変更もありません。しかし、スタイルオブジェクトに他の要素を渡した場合、

color: 'red' 

これらの変更が行われます。また、私のスタイルオブジェクトを直接渡す場合...

barWidth: { 
     width: 50 +'%' 
    } 

これはDOM上で正しく表示されます。

何が間違っていますか/間違っていますか？

Answer 1

理由だけでは使用しない：

<div id="trackerBarActual" v-bind:style="barWidthCalculated"> 

    computed: { 
    barWidthCalculated: function(){ 
     return { 
     width: (this.numQuotes * 10) + '%', 
     color: 'red' 
     }; 
    }