How to use the customStyle property

[Tarabass]

For now the size accepts only numbers. I want to be able to use 7vw instead of 70px. My idea was to use this:

:customStyle="{ height: '7vw !important;', width: '7vw !important;' }"

But it doesn't work :(

[kasnti]

:customStyle="vueAvatar.styleObject"

data() {
    return {
      vueAvatar: {
        styleObject: {
          height: '7vw !important'
          width: '7vw !important'
        },
      }
    }
  }

[Tarabass]

@kasnti That would result in exactly the same thing. But while I was trying your code I noticed that the problem was within my own code.

If I remove the semicolons it works. This is how Vue is expecting it and what I did wrong.

<avatar :customStyle="{ height: '7vw', width: '7vw' }" username="Jane Doe"></avatar>

[kasnti]

@Tarabass you are right

[Tarabass]

Thank you for pointing me into the right direction 😝