Vue-loader component experiencing issues with applying dynamic CSS styling

Question

Vue-loader component experiencing issues with applying dynamic CSS styling

I'm working with a Vue Component and I want to enhance it by binding a color to a specific message. Initially, I attempted to achieve this using a binding like

:style="styles"

However, I encountered the following error:

The property or method "styles" is not defined on the instance but referenced during render. Ensure that this property is reactive, either in the data option, or for class-based components, initialize the property

or create specific color classes in the css file.

.color--1

This led to an error stating

"Cannot read property '2' of undefined"

Is there a way to dynamically bind the color of the class based on a number received from the API?

Below is my code snippet:

<template>
    <div class="chat__message shadow" :class="{'chat__message--own': message.selfOwned, colorClass}" >

    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        props: ['message'],
        data(){
            return{
                time: '',
                colorArray: ['hsl(210 , 82 , 50 )', 'hsl(130 , 50 , 51 )', 'hsl(337 , 50 , 46 )','hsl(133 , 50 , 65 )', 'hsl(28 , 50 , 70 )','hsl(180 , 50 , 59 )' , 'hsl(274 , 50 , 82 )'],
                colorClass:'',
                styles: {
                    'background-color' : this.colorArray[2]
                },
            }
        },
        created(){
            this.time = moment(this.message.created_at).format('HH:mm');
            this.setColorClass(this.message.matchPosition);
        },
        methods: {
            setColorClass(number){
                this.colorClass = "color--" + number ;
            }
        }
    }
</script>

<style lang="scss">
    .color{
            &--1{background-color: hsl(210 , 82 , 50 );}
            &--2{background-color: hsl(130 , 50 , 51 );}
            &--3{background-color: hsl(337 , 50 , 46 );}
            &--4{background-color: hsl(133 , 50 , 65 );}
            &--5{background-color: hsl(28 , 50 , 70 );}
            &--6{background-color: hsl(180 , 50 , 59 );}
            &--7{background-color: hsl(274 , 50 , 82 );}
    }
    .chat{
        &__message{

            &--own{
                background-color: hsl(201, 100%, 55%);
                color: rgba(255,255,255,1);
                text-align: right;
}}

</style>

css laravel vue.js vue-loader

Answer 1

Answer №1

Give this a try,

export default {
     props: ['message'],
     data(){
         var self = this; // Including this line
         return{
             date: '',
             colorArray: ['hsl(10 , 72 , 40 )', 'hsl(140 , 30 , 41 )', 'hsl(297 , 49 , 56 )','hsl(100 , 30 , 75 )', 'hsl(38 , 60 , 80 )','hsl(200 , 32 , 61 )' , 'hsl(254 , 47 , 76 )'],
             shade:'',
             stylesColor: {
                 'background-color' : self.colorArray[1] // Edit needed here
             },
         }
     },
...

Answer 2

Give this a try,

export default {
     props: ['message'],
     data(){
         var self = this; // Including this line
         return{
             date: '',
             colorArray: ['hsl(10 , 72 , 40 )', 'hsl(140 , 30 , 41 )', 'hsl(297 , 49 , 56 )','hsl(100 , 30 , 75 )', 'hsl(38 , 60 , 80 )','hsl(200 , 32 , 61 )' , 'hsl(254 , 47 , 76 )'],
             shade:'',
             stylesColor: {
                 'background-color' : self.colorArray[1] // Edit needed here
             },
         }
     },
...

Answer 3

Answer №2

The code snippet you shared does not contain any HTML that references styles. Is it possible that another component is attempting to access the styles variable of this component?

Is there a way to dynamically bind the color of a class based on a number received from the API?

If you add cssEl to your component's data object, you can handle it like so:

watch: {
  // Track the color (or colors) retrieved from the API
  colorTakenFromApi () {
    // Remove the previous class, if it exists
    this.cssEl && this.cssEl.remove();
    // Create a DOM element and specify it as a stylesheet
    this.cssEl = document.createElement('style');
    this.cssEl.type = 'text/css';
    // Use a text template to insert the desired CSS rule
    this.cssEl.innerHTML = `
      .${this.cssClass} {
        background-color: `${this.colorTakenFromApi}`
      }
    `;
  }
}

It may be considered a workaround, but this is how I managed to update my CSS classes at runtime.

Answer 4

The code snippet you shared does not contain any HTML that references styles. Is it possible that another component is attempting to access the styles variable of this component?

Is there a way to dynamically bind the color of a class based on a number received from the API?

If you add cssEl to your component's data object, you can handle it like so:

watch: {
  // Track the color (or colors) retrieved from the API
  colorTakenFromApi () {
    // Remove the previous class, if it exists
    this.cssEl && this.cssEl.remove();
    // Create a DOM element and specify it as a stylesheet
    this.cssEl = document.createElement('style');
    this.cssEl.type = 'text/css';
    // Use a text template to insert the desired CSS rule
    this.cssEl.innerHTML = `
      .${this.cssClass} {
        background-color: `${this.colorTakenFromApi}`
      }
    `;
  }
}

It may be considered a workaround, but this is how I managed to update my CSS classes at runtime.

Answer 5

Answer №3

If you find yourself unable to access the variable this when initializing data, there is a workaround:

Start by declaring your styles object as an empty object.

data(){
    return{
        time: '',
        colorArray: ['hsl(210 , 82 , 50 )', 'hsl(130 , 50 , 51 )', 'hsl(337 , 50 , 46 )','hsl(133 , 50 , 65 )', 'hsl(28 , 50 , 70 )','hsl(180 , 50 , 59 )' , 'hsl(274 , 50 , 82 )'],
        colorClass:'',
        styles: {},
    }
},

Then, in the created lifecycle hook, set the initial style:

created() {
    this.time = moment(this.message.created_at).format('HH:mm');
    this.setColorClass(this.message.matchPosition);

    // Using Vue.set
    Vue.set(this, 'styles', {
        'background-color' : self.colorArray[2]
    });

    // OR Normal setting
    this.styles = {
        'background-color' : this.colorArray[2]
    };
},

Answer 6

If you find yourself unable to access the variable this when initializing data, there is a workaround:

Start by declaring your styles object as an empty object.

data(){
    return{
        time: '',
        colorArray: ['hsl(210 , 82 , 50 )', 'hsl(130 , 50 , 51 )', 'hsl(337 , 50 , 46 )','hsl(133 , 50 , 65 )', 'hsl(28 , 50 , 70 )','hsl(180 , 50 , 59 )' , 'hsl(274 , 50 , 82 )'],
        colorClass:'',
        styles: {},
    }
},

Then, in the created lifecycle hook, set the initial style:

created() {
    this.time = moment(this.message.created_at).format('HH:mm');
    this.setColorClass(this.message.matchPosition);

    // Using Vue.set
    Vue.set(this, 'styles', {
        'background-color' : self.colorArray[2]
    });

    // OR Normal setting
    this.styles = {
        'background-color' : this.colorArray[2]
    };
},

Answer 7

Answer №4

If you're facing a problem and not sure if I understand it correctly, you can try using computed methods:

props: ['message', 'colorNumber'],
computed: {
   getColorClass () {
      return 'color--' + this.colorNumber
   }
},

In your template, you can use the following code:

<template>
    <div :class="{'chat__message shadow': true,
                  'chat__message--own': message.selfOwned,
                   getColorClass: true}" >
    </div>
</template>

If you want to maintain props as they were before, and the prop "message" will change, then consider using watch (deep kind) instead of computed methods.

However, if the message props remain constant after the page is loaded, you can store it in data() variables and utilize it in computed methods:

data(){
    return {
        colorNumber: '',
    }
},
mounted() {
   this.$nextTick(function () {
       // Code that will run only after the
       // entire view has been rendered

       this.colorNumber = this.message.matchPosition;
   })
},

Answer 8

If you're facing a problem and not sure if I understand it correctly, you can try using computed methods:

props: ['message', 'colorNumber'],
computed: {
   getColorClass () {
      return 'color--' + this.colorNumber
   }
},

In your template, you can use the following code:

<template>
    <div :class="{'chat__message shadow': true,
                  'chat__message--own': message.selfOwned,
                   getColorClass: true}" >
    </div>
</template>

If you want to maintain props as they were before, and the prop "message" will change, then consider using watch (deep kind) instead of computed methods.

However, if the message props remain constant after the page is loaded, you can store it in data() variables and utilize it in computed methods:

data(){
    return {
        colorNumber: '',
    }
},
mounted() {
   this.$nextTick(function () {
       // Code that will run only after the
       // entire view has been rendered

       this.colorNumber = this.message.matchPosition;
   })
},

Vue-loader component experiencing issues with applying dynamic CSS styling

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to disable auto rotation on a website when accessed from a mobile phone?

What is the best way to retrieve the modelValue from within a Vue 3 directive?

Creating a layout with 2 rows and 5 columns in Bootstrap 5 may not perfectly fit a 100% width and 100% height

Having difficulty altering the font in the WordPress tinymce editor

The use of asterisk (*) in importing dynamically

The Vue application using Axios is sending data to an Express backend, but it is receiving

Vue 3 Single File Component experiencing a type error when assigning v-model to a textarea

Creating a responsive navigation menu using Bootstrap 4 by merging data from various MySQL tables

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Utilize the display: flex property to position a div in the bottom right corner of its containing element

Troubleshooting: Issues encountered with Laravel 8 gates when using Auth::guard

"Duplicate instances of the domain appear in the URLs of the images

Steps to place a URL and Buttons over an existing header Image

The process of ensuring a component is able to watch for the router even when it is not within the router

Click-triggered CSS animations

Perform a comparison of two JSON structures in PHP, identifying any missing elements in each and adding them with a default value

Struggling with getting Bootstrap Affix-bottom to scroll back up?

Animate a div once the parent section becomes visible while scrolling

Various formatting options on GitHub Pages

Shifting Elements - Navigation triggers subtle movements in CSS styles as you move across pages