从计算值VUE 3创建div宽度

Question

我正在尝试从计算值设置我的div宽度，但我不知道如何存档它。

案例:我有一些产品，其信息来自API，并且length值根据我选择的产品而变化，因此该组件应该是动态的。

客户想要的东西:

这意味着，长度值也应该是我的div/span宽度，当值为10时，应该是10%绿色，29,29%绿色等

下面是我的代码:

<li>
<span class="detail-name">foo</span>
<div class="progress" :style="getDataClass" ></div>
<span class="bold-value">{{something}}</span>
</li>

"getDataClass"是来自Store

的计算值首先，我过滤数据:

getData () {
return this.product.find(meta => meta.key === 'length_value').value
},

这个函数给我的值是'63'。之后，我添加了这个值来使用Style:

getDataClass() {
return {width: this.getData + '%'}
},

这给了我值{ "width": "63%" }

这是我的SASS (Bulma)

.progress
position: relative
flex: 1
margin: 0 8px
height: 10px
background-color: $color-grey
&::before
content: ''
position: absolute
width: 100%
height: 100%
background-color: $color-green

有人能帮帮我吗?

我看到它已经在我的Vue课程中工作了，但是我错过了一些东西或者它不适用于这种情况

我希望我能正确地解释它，非常感谢你的帮助。

Answer 1

getData是一个方法还是一个计算值?如果它是一个方法，下面可能会有所帮助:

getDataClass() {
console.log("C:",{width: this.getData() + '%'});
console.log("C:",{width: this.getData + '%'});
return {width: this.getData() + '%'}
}