Vue.js cannot add style from method

Question

I'd like to add some styles into html element from methods:

<div class="add-profile-img" v-bind:style="getBackgroundImg()">

The method is:

getBackgroundImg: function() {
return {   
    width: 180px; 
    height: 180px; 
    background-color: 'yellow';
    background-image:url(this.BASE_URL +'/uploads/noimg.gif');
    }
},

However, I get

Syntax Error:   Identifier directly after number (79:13)

  77 |      getBackgroundImg: function() {
  78 |          return {   
> 79 |          width: 180px; 
     |                    ^

How can I fix it?

Answer 1

Dimension in pixels need to be in string format so the function return a valid javascript object:

return {   
    width: '180px', 
    height: '180px',
    'background-color': 'yellow',
    'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
}

Answer 2

can I ask why would you want to do that? As far as I know if you bind a style, just create the object in the data object and do not forget to use the style sintax adapted for javascript. (Camelcase)

data(){
    return{
        yourStyleVariable: {
            backgroundColor: 'red'
        }
    }
}