javascript - Pass data variable as argument in style section of vue2 - Stack Overflow

admin管理员组

文章数量:1405636

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 ponent used in my landing page . I want to change background of selected row of table from my landing page.

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 ponent used in my landing page . I want to change background of selected row of table from my landing page.

• javascript
• jquery
• css
• vuejs2
• vuetify.js

Share Improve this question Follow asked Sep 9, 2022 at 17:38 Nilesh MishraNilesh Mishra 28433 silver badges1616 bronze badges 6

• 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 Commented Sep 9, 2022 at 18:08
• 1 @RyukShi actually, .table-row is the class of the table ponent's row and I want to override their nth-child(index) – Nilesh Mishra Commented Sep 9, 2022 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 Commented Sep 9, 2022 at 19:26
• 1 @RyukShi I have already tried this one but it's not working. – Nilesh Mishra Commented Sep 10, 2022 at 2: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 ? – Rohìt Jíndal Commented Sep 14, 2022 at 13:53

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 6 +50

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 ponent 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 ing 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./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>

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):

puted: {
    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

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)
}

本文标签： javascriptPass data variable as argument in style section of vue2Stack Overflow