vue.js component inline style concatenation

Question

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!

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
– Derek Pollard, Commented Nov 6, 2018 at 19:54

tony19 · Accepted Answer · 2022-07-15 22:52:54Z

3

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

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

edited Jul 15, 2022 at 22:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 6, 2018 at 19:48

Derek Pollard

7,1856 gold badges45 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jim B. Over a year ago

This is better than my answer. +1.

Derek Pollard Over a year ago

@Max what version of vue are you using?

Max Over a year ago

the latest one running in development mode

tony19 · Accepted Answer · 2022-07-16 02:32:18Z

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}` }"

Sumurai8 · Accepted Answer · 2018-11-06 19:51:41Z

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}`
        }
      }
    }
  }
}

tn2000 · Accepted Answer · 2022-01-14 10:49:36Z

0

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>

answered Jan 14, 2022 at 10:49

tn2000

7981 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

vue.js component inline style concatenation

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related