Pass data variable as argument in style section of vue2

Question

let's we have a data variable and i want to use this data variable for my style.

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

My use case is that i have a table component used in my landing page . I want to change background of selected row of table from my landing page.

Answer 1

I don't think we have any solution as per your requirement in Vue 2. In Vue 3.2, They introduced this feature which enables component state-driven dynamic CSS values in <style> tags. You can read that out here.

After understand your exact requirement and post spending few hours on this requirement, Here I am coming up with the solution in JavaScript way as we can't use dynamic variables in CSS nth-child selectors. You can have a look in this SO post : Is it possible to use CSS vars in CSS3 selectors?

Looks like you have to do update the style of nth-child in pure JS way.

Working Demo :

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

I don't know how to explain it. but here's how to pass 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
      }
   }
}

Example of accessing 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 make the props if you only want to get the index from your data