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

ponents: {
  '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 remendations from the web, but none worked for me.

Any help appreciated!

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

ponents: {
  '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 remendations from the web, but none worked for me.

Any help appreciated!

• javascript
• vue.js
• vue-ponent

• Not exactly sure who downvoted you, or why, but this question is valid. Nuance between the syntax template for variables in attributes vs. non-attributes can be a pain. – Derek Pollard Commented Nov 6, 2018 at 19:54

4 Answers 4

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

:style="{backgroundColor: '#' + 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 puted 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 puted property should be added to the same ponent:

props: ['procolors'],
template: `...`,
puted: {
  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}` }"

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:

ponents: {
  '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:

ponents: {
  '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>\
     ',
    puted: {
      rowColor () {
        return {
          "background-color": `#${this.procolors.user.profile_background_color}`
        }
      }
    }
  }
}

For those who want to use style binding with vue3. This is the solution:

<script setup lang="ts">
import {ref} from 'vue'
const color = ref("red")
</script>

<template>
  <div class="parti-color" 
       :style="{backgroundColor: color, width: '20px', height: '30px'}"
  />
</template>