將動態樣式傳遞給我在VueJS中的元素

我正在試圖製作一種進度條來跟蹤已完成任務的百分比。我想v-bind：樣式並將其傳遞給{width：dynamicWidth +'％'}以控制這個條的進度。到目前爲止，我已經創建了一個計算的變量，將返回完整的我想欄中顯示的百分比，我已經建立了我的動感風格在數據對象將動態樣式傳遞給我在VueJS中的元素

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

我還添加了一個元素的DOM查看發生了什麼事。

<div id="trackerBar"> 
     <div id="trackerBarActual" v-bind:style="barWidth"> 
      <h2>{{numQuotes}}/10</h2> 
      <p>{{barWidthCalculated}}</p> 
     </div> 
    </div>

我的酒吧保持固定在100％，我沒有看到DOM上的任何插值。我還在數據部分建立了另一個NUMBER變量，並試圖將其傳遞給我的width屬性，但仍然沒有變化，並且沒有在DOM上進行渲染。但是，如果我通過我的樣式對象中的任何其他元素，如

color: 'red'

發生這些更改。此外，如果我通過我的樣式直接對象數即ie ...

barWidth: { 
     width: 50 +'%' 
    }

它正確顯示在DOM上。

我在想什麼/做錯了什麼？

來源

2017-07-28 DMrFrost

爲什麼不直接使用：

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

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

來源

2017-07-28 05:10:12 AirNoir

將動態樣式傳遞給我在VueJS中的元素

回答

相關問題