[Vuejs]-Vue.js component inline style concatenation

by

1👍

✅

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

3👍

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

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

1👍

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

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>
👤tn2000

Leave a comment