👀 Views: 1505 💬 Answers: 1 📅 Created: 2025-06-12

vue.js css css-variables JavaScript

I'm working on a Vue.js application where I'm trying to use CSS custom properties (variables) to control styles dynamically. I have a component where I need to change the color of a button based on a user selection from a dropdown. However, even though I'm updating the custom property in the data model, the changes are not reflecting in the styles of my elements. Here's a simplified version of my code: ```vue <template> <div> <select v-model="selectedColor" @change="updateColor"> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> </select> <button class="dynamic-button">Click me!</button> </div> </template> <script> export default { data() { return { selectedColor: 'red', }; }, methods: { updateColor() { // This should change the CSS variable document.documentElement.style.setProperty('--button-color', this.selectedColor); } }, mounted() { // Initialize the button color this.updateColor(); } }; </script> <style scoped> .dynamic-button { background-color: var(--button-color); color: white; padding: 10px 20px; border: none; border-radius: 5px; } </style> ``` In my CSS, I have defined the `--button-color` variable at the root level. When I change the selection in the dropdown, the `updateColor` method is being called, and I can see that `document.documentElement.style.getPropertyValue('--button-color')` returns the correct value. However, the button's background color doesn’t change accordingly. I've checked the browser's Developer Tools, and the `--button-color` variable appears to update as expected, but visually it doesn't. I also tried forcing a reflow by accessing the offsetWidth property right after updating the variable, but that didn't solve the issue. Is there something I'm missing with how Vue.js handles reactivity regarding CSS custom properties? Any insights or suggestions would be greatly appreciated.