Utilize data attributes in VueJS to dynamically style elements

Question

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I manually input a value like '#f00', it works perfectly fine.

My template structure looks like this:

<template>
 <ul class="striped">
     <li>foo</li>
     <li>bar</li>
     <li>foobar</li>
</ul>


</template>

<style>
 ul.striped> li:nth-of-type(odd) {
    background-color: this.colors[0].backgroundcolor;  //dynamic value fetched from data()
}
</style>

<script>

  data() {
    return {

        colors: [{'backgroundcolor':'#def'}], //simplified version for clarity
[..]
</script>

css vue.js styles

Answer 1

Answer №1

Vue 3.2 has introduced a new feature called State-Driven Dynamic CSS, which allows you to easily apply dynamic styles based on the component's state:

<template>
    <ul class="striped">
        <li>foo</li>
        <li>bar</li>
        <li>foobar</li>
    </ul>
</template>

<style>
    ul.striped> li:nth-of-type(odd) {
        background-color: v-bind('colors[0]')
    }
</style>

<script>
    data() {
        return {
            colors: ['#def'],
        }
    }
</script>

For Vue 2 users, you can achieve similar functionality using CSS custom properties:

<template>
    <ul class="striped" :style="`--color: ${colors[0]}`">
        <li>foo</li>
        <li>bar</li>
        <li>foobar</li>
    </ul>
</template>

<style>
    ul.striped> li:nth-of-type(odd) {
        background-color: var(--color)
    }
</style>

<script>
   export default {
      data() {
        return {
            colors: ['#def'],
        }
    }
   }
</script>

Answer 2

Vue 3.2 has introduced a new feature called State-Driven Dynamic CSS, which allows you to easily apply dynamic styles based on the component's state:

<template>
    <ul class="striped">
        <li>foo</li>
        <li>bar</li>
        <li>foobar</li>
    </ul>
</template>

<style>
    ul.striped> li:nth-of-type(odd) {
        background-color: v-bind('colors[0]')
    }
</style>

<script>
    data() {
        return {
            colors: ['#def'],
        }
    }
</script>

For Vue 2 users, you can achieve similar functionality using CSS custom properties:

<template>
    <ul class="striped" :style="`--color: ${colors[0]}`">
        <li>foo</li>
        <li>bar</li>
        <li>foobar</li>
    </ul>
</template>

<style>
    ul.striped> li:nth-of-type(odd) {
        background-color: var(--color)
    }
</style>

<script>
   export default {
      data() {
        return {
            colors: ['#def'],
        }
    }
   }
</script>

Utilize data attributes in VueJS to dynamically style elements

Answer №1

Similar questions

An issue occurred during rendering: `TypeError: Unable to retrieve the length property of an undefined value`

How to Make a React JS Component Shift to the Next Row as the Window Shrinks

Guide on creating a hand-drawn pencil circle using only CSS!

Is it possible to modify content in a Laravel post using formData?

What is the accurate way to retrieve the icon path for 'manifest.json'?

Adjust the CSS of the currently dragged item using jQuery sortable

Detecting server errors in Nuxt.js to prevent page rendering crashes: A Vue guide

Using app.js in a blade file can cause jQuery functions and libraries to malfunction

I am facing hurdles with firebase permissions as it is not granting me the necessary access

Why aren't Material UI v5 styles being applied to the class?

Tips for recalling the display and concealment of a div element using cookies

Could an average user potentially access a hidden button meant only for management by examining a website and discovering how to activate it?

How can I resize an element using jQuery resizable and then revert it back to its original size with a button click?

Creating a unique function to map an array in VueJS specifically designed for table manipulation

Uniformly sized text containers and buttons

separating kids with selectors

Loading dynamic CSS on WordPress frontend only

Unable to customize the button color within the Bootstrap framework

Adjust the color of the navbar only after a user scrolls, with a slight delay rather than

Using RadStyleSheetManager for Optimizing CSS Caching