Using data variables as arguments in the style section of Vue2

Question

Using data variables as arguments in the style section of Vue2

Suppose we have a data variable and I want to utilize this data variable for styling purposes.

data() 
{
 return{
        selected:{
         index: 2
        }
     }
}
<style>
.parent-table >>> .table-row:nth-child(/* here I intend to use selected.index */) {
   background: red;
}
</style>

My scenario involves using a table component on my landing page. The goal is to modify the background of the selected row in the table from the landing page.

javascript jquery css vuejs2 vuetify.js

Answer 1

Answer №1

Unfortunately, there doesn't seem to be a solution that fits your requirements within Vue 2. The good news is that in Vue 3.2, a new feature was introduced that allows for component state-driven dynamic CSS values within <style> tags. You can learn more about this update here.

After carefully analyzing your needs and spending some time researching, I have come up with a JavaScript-based solution since dynamic variables cannot be used in CSS nth-child selectors. For further information, you can refer to this Stack Overflow post:

Is it possible to use CSS vars in CSS3 selectors?

It appears that the best approach would be to update the style of the nth-child using pure JS.

Check out this working demo below:

new Vue({
  el: '#app',
  data: {
    selected: {
      index: 2
    }
  },
  mounted() {
    let listSelector = document.querySelector(`li:nth-child(${this.selected.index})`);
    listSelector.style.backgroundColor = 'lightGreen';
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Fourth list item</li>
    <li>Fifth list item</li>
  </ul>
</div>

Answer 2

Unfortunately, there doesn't seem to be a solution that fits your requirements within Vue 2. The good news is that in Vue 3.2, a new feature was introduced that allows for component state-driven dynamic CSS values within <style> tags. You can learn more about this update here.

After carefully analyzing your needs and spending some time researching, I have come up with a JavaScript-based solution since dynamic variables cannot be used in CSS nth-child selectors. For further information, you can refer to this Stack Overflow post:

Is it possible to use CSS vars in CSS3 selectors?

It appears that the best approach would be to update the style of the nth-child using pure JS.

Check out this working demo below:

new Vue({
  el: '#app',
  data: {
    selected: {
      index: 2
    }
  },
  mounted() {
    let listSelector = document.querySelector(`li:nth-child(${this.selected.index})`);
    listSelector.style.backgroundColor = 'lightGreen';
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Fourth list item</li>
    <li>Fifth list item</li>
  </ul>
</div>

Answer 3

Answer №2

I'm struggling to find the right words, but here's a guide on passing variables to style scope

PROPS:

props: {
    bgColor: {
       type: String,
       default: "#ff0000" //RED
   }
 },

COMPUTED (variables that can be used as arguments):

computed: {
    tableRowColor() {
      return {
        '--bg-color': this.bgColor,
        '--index': this.selected.index //from your data
      }
   }
}

Here's an example of how you can access the variables inside style scoped:

<style scoped>

     table, td, th {
        border: 1px solid;
     }

     table {
        width: 100%;
        background: var(--bg-color); /*here is how to access the variable */
    }
</style>

note: You don't need to define props if you only need to retrieve the index from your data

Answer 4

I'm struggling to find the right words, but here's a guide on passing variables to style scope

PROPS:

props: {
    bgColor: {
       type: String,
       default: "#ff0000" //RED
   }
 },

COMPUTED (variables that can be used as arguments):

computed: {
    tableRowColor() {
      return {
        '--bg-color': this.bgColor,
        '--index': this.selected.index //from your data
      }
   }
}

Here's an example of how you can access the variables inside style scoped:

<style scoped>

     table, td, th {
        border: 1px solid;
     }

     table {
        width: 100%;
        background: var(--bg-color); /*here is how to access the variable */
    }
</style>

note: You don't need to define props if you only need to retrieve the index from your data

Answer 5

Answer №3

Here is a demonstration of passing a data property to a CSS property.

<script>
    export default {
        data: () => ({
            color: 'red',
        }),
    };
</script>
<style scoped>
.card-text-color {
    color: v-bind(color)
}

Answer 6

Here is a demonstration of passing a data property to a CSS property.

<script>
    export default {
        data: () => ({
            color: 'red',
        }),
    };
</script>
<style scoped>
.card-text-color {
    color: v-bind(color)
}

Using data variables as arguments in the style section of Vue2

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript (specifically, using jQuery) in conjunction with AJAX

Using browserify "require" in console: A step-by-step guide

D3: Ensuring Map is Scaled Correctly and Oriented Correctly

The image from the SQL database fails to show up in the detailsView ImageField when using the jQuery lightbox, as well as the asp:Image control

Issue with Sheetjs: Date format is not recognized when adding JSON data to a

"Commander.js does not process query strings when used in conjunction with node

I must duplicate a pattern to accommodate various object dimensions

How can I apply a jquery method to a variable when JavaScript already has a method with the same name?

Nextjs is having trouble loading the Infogram script

How can I retrieve the input value on the current page using PHP?

Experiment with a drag-and-drop interaction using vue-test-utils

Creating ellipses using Three.js with a specified list of points

When using @testing-library/react (rtl), the 'waitFor' function achieves success even without the need for the 'await' keyword

Stop the interval when hovering and start the interval when moving the mouse away

Click on the image to open it in the modal window

Refining an array data table within a nested component

The spinal cord of design inquiry

Creating intricate JavaScript objects for JSON API integration can be accomplished by following these steps:

React component rendering twice due to width awareness

The $or operator in mongoose falls short in providing complete data when paired with the find() method