我正在尝试制作一种进度条来跟踪已完成任务的百分比。我想要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上正确显示。
我错过了什么/做错了什么?
答案 0 :(得分:6)
为什么不直接使用:
<div id="trackerBarActual" v-bind:style="barWidthCalculated">
computed: {
barWidthCalculated: function(){
return {
width: (this.numQuotes * 10) + '%',
color: 'red'
};
}