4

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.

Nilesh Mishra
  • 418
  • 2
  • 15
  • 1
    I think you should make a method that applies a css property with the index with `this.selected.index`. You have various class name `.parent-table` and `.table-row`, I don't realy understand, but you can apply css property with the css selector `:nth-child(index)` – RyukShi Sep 09 '22 at 18:08
  • 1
    @RyukShi actually, .table-row is the class of the table component's row and I want to override their nth-child(index) – Nilesh Mishra Sep 09 '22 at 18:14
  • 1
    ok ok I had this idea, that might look like this, in the method : `document.querySelector('css_selector').style.backgroundColor('red');` – RyukShi Sep 09 '22 at 19:26
  • 1
    @RyukShi I have already tried this one but it's not working. – Nilesh Mishra Sep 10 '22 at 02:50
  • 1
    @NileshMishra Can you please confirm, are you creating HTML table or vuetify `v-data-table` ? Also, do you want to change the row color on click on the row ? – Debug Diva Sep 14 '22 at 13:53
  • @RohìtJíndal I have a component Table which is created using both HTML and vuetify v-data-table. – Nilesh Mishra Sep 14 '22 at 15:58

3 Answers3

6

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>
Debug Diva
  • 26,058
  • 13
  • 70
  • 123
  • 1
    I can't change the component I have to do something in the parent vue file without disturbing Table.vue file. – Nilesh Mishra Sep 14 '22 at 16:00
  • 1
    @NileshMishra I understood your requirement now. I don't think we can pass vue variables into a `` tag as it is static. But we can find some way to achieve this by using CSS variables .. I need to spend some more time on this requirement you have. Will hopefully update you by tomorrow EOD. – Debug Diva Sep 14 '22 at 17:41
  • 1
    @NileshMishra I updated the answer as per your requirement. Hope it will work as per your expectation. – Debug Diva Sep 15 '22 at 05:37
  • 1
    I have already tried this one,but it's not working. – Nilesh Mishra Sep 15 '22 at 06:13
  • But it's working in the above code snippet. So it should work locally as well .. did you tried with `/deep/` css selector ? – Debug Diva Sep 15 '22 at 07:42
  • I recommend the solution below using CSS vars into your script/template tags. – kissu Sep 17 '22 at 00:54
  • @kissu By that way we can pass the dynamic variables as a value but author wants to access dynamic variable in the selector which is not possible directly by using Vue 2. – Debug Diva Sep 17 '22 at 09:03
5

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

Daddi Al Amoudi
  • 770
  • 1
  • 5
  • 16
  • I have to pass dynamic parameter in nth-child() – Nilesh Mishra Sep 15 '22 at 12:11
  • This is indeed the way to go in Vue2. – kissu Sep 17 '22 at 00:53
  • @kissu This is not what author wants. By this way we can pass the dynamic variables as a value but author wants to access dynamic variable in the selector which is not possible directly by using Vue 2. – Debug Diva Sep 17 '22 at 09:02
  • @RohìtJíndal for me, it achieves the same goal even if not exactly written the way OP expected. But yeah, maybe it's different. – kissu Sep 17 '22 at 09:04
  • 1
    @kissu It will not achieve the same goal my friend. where that `--index` variable is using in his answer ? Can you pass dynamic values as a selector ? You can not pass dynamic value in `:nth-child` directly just using CSS. I did lot of research and then at the end I came up with this solution. – Debug Diva Sep 17 '22 at 09:30
2

this is how you pass a data property to a css property.

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