vue.js component inline style concatenation

I'm stuck with a vue.js component inline style concatenation. My code is the following:

components: {
  'twitter-item': {
    props: ['procolors'],
    template: '\
      <div class="color-quadrat" v-bind:data-id="procolors.id" v-bind:style="background-color: #{procolors.user.profile_background_color}">\
      <p>{{procolors.user.profile_background_color}}</p>\
      </div>\
     '
  }
}

I'm trying to get procolors.user.profile_background_color as inline background color. Special is that the value from procolors.user.profile_background_color has no #. So I have to add this in the template.

I tried all kinds of recommendations from the web, but none worked for me.

Any help appreciated!

Use this, which utilizes vue's style object syntax:

:style="{backgroundColor: '#' + procolors.user.profile_background_color}"

You have several choices in how to add styling. If you use v-bind:style="...", or it shorthand :style="...", you need to pass either a valid string, valid variable or a valid object.

Currently you are trying to parse background-color: #{procolors.user.profile_background_color} as javascript, which is not going to work.

You can use a javascript template to create a string:

components: {
  'twitter-item': {
    props: ['procolors'],
    template: '\
      <div class="color-quadrat" v-bind:data-id="procolors.id" v-bind:style="`background-color: #${procolors.user.profile_background_color}`">\
      <p>{{procolors.user.profile_background_color}}</p>\
      </div>\
     '
  }
}

It is often more readable to refactor it to use a variable or function instead:

components: {
  'twitter-item': {
    props: ['procolors'],
    template: '\
      <div class="color-quadrat" v-bind:data-id="procolors.id" v-bind:style="rowColor">\
      <p>{{procolors.user.profile_background_color}}</p>\
      </div>\
     ',
    computed: {
      rowColor () {
        return {
          "background-color": `#${this.procolors.user.profile_background_color}`
        }
      }
    }
  }
}

Accoding to Binding inline styles documentation there are to ways to pass inline styles - as an object or as an array.

In your example, background-color: #{procolors.user.profile_background_color} is neither object or an array.

For sake of readability and maintainability (and good practice in general), I'd suggest to create a computed property that will return an object with inline styles. This way it will more clear where is the issue with concatenation:

Template will look as follows:

 <div 
     class="color-quadrat" 
     :data-id="procolors.id"
     :style="itemStyles">

     <p>{{ procolors.user.profile_background_color }}</p>
  </div>

And computed property should be added to the same component:

props: ['procolors'],
template: `...`,
computed: {
  itemStyles () {
    return {
      backgroundColor: `#${this.procolors.user.profile_background_color}`
    }
  }
}

If you still prefer to keep it inline, then style binding should be changed to following:

v-bind:style="{ backgroundColor: `#${procolors.user.profile_background_color}` }"