Make div width from a computed value VUE 3

Question

I am trying to set my div width from a computed value, but I don't know how to archive it.

Case: I have some products which the informations comes from an API, and the length value changes depending on the product I selected, for this reason this component should be Dynamic.

The customer wants somethins like this:

That means, the lenght value should be also my div/span width, when the value is 10, should be 10% green, 29, 29% green etc.

Here's my code:

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

"getDataClass" is a computed value which comes from Store

First, I filter the data:

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

this function gives me the value '63'. Afther it I add this value to use with Style:

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

This gives me the value { "width": "63%" }

And this is my 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

Can someone please help me ?

I saw it already working on my Vue course, but I am missing something or it does not aplly for this case

I hope I could explain it correctly, thank you very much for your help.

Answer 1

Is getData a method or a computed value? If it is a method, the following might help:

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

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