将动态样式传递给VueJS中的元素(Passing dynamic styles to my element in VueJS)

将动态样式传递给VueJS中的元素(Passing dynamic styles to my element in VueJS)

我正在尝试制作一种进度条来跟踪已完成任务的百分比。 我想v-bind：styles并传递它{width：dynamicWidth +'％'}以控制此栏的进度。 到目前为止，我已经创建了一个计算变量，它将返回我想要显示的完整百分比，并且我在数据对象中设置了我的动态样式

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'

这些变化发生了。 如果我直接传递我的样式对象，即...

barWidth: { width: 50 +'%' }

它在DOM上正确显示。

我错过了什么/做错了什么？

I am trying to make a type of progress bar to track a percentage of tasks completed. I want to v-bind:styles and pass it {width: dynamicWidth + '%'} in order to control the progression of this bar. So far I have created a computed variable that will return the percentage complete I want to bar to display, and I have set up my dynamic style in the data object

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

I also added an element to the DOM to see what was happening.

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

My bar stays fixed at 100%, i dont see any interpolation on the DOM. I also established another NUMBER variable in my data section and attempted to pass that to my width property, but still no change, and no rendering on the DOM. However if I pass any other elements in my styles object such as

color: 'red'

Those changes take place. Also if I pass my styles object a number directly ie...

barWidth: { width: 50 +'%' }

It displays correctly on the DOM.

What am I missing/doing wrong?

最满意答案

为什么不使用：

<div id="trackerBarActual" v-bind:style="barWidthCalculated"> computed: { barWidthCalculated: function(){ return { width: (this.numQuotes * 10) + '%', color: 'red' }; }

why not just use :

<div id="trackerBarActual" v-bind:style="barWidthCalculated"> computed: { barWidthCalculated: function(){ return { width: (this.numQuotes * 10) + '%', color: 'red' }; }