Using v-bind to dynamically set styles in Vue.js

Question

Using v-bind to dynamically set styles in Vue.js

While utilizing v-bind:style to apply dynamic values, I encountered an issue where v-bind:style did not seem to work. However, in the console, I verified that v-bind:style was receiving the correct value (:style='{ color : red (or any other value) }'). The CSS in the style section also reflected the changes successfully. Why is v-bind not working? Any suggestions are greatly appreciated. Thank you.

<div class="l-modal" v-if="modalVisible1">
      <div class="p-modal" @click="hide_modal" :style='{ color : titleColor1 }' ref="test">
        <p>{{titleTxt1}}</p>
        <p>{{contentTxt1}}</p>
        <p>{{endTxt1}}</p>
        <button class="p-modal__btn">{{buttonTxt1}}</button>
      </div>
</div>
<div class="l-modal__bg" v-if="modalBgVisible1" @click="hide_modal"></div>

data () {
    return {
      selected_title_color1:'',
      titleColor1:'',
      colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
      colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
    }
},
watch:{
    selected_title_color1: function () {
      this.titleColor1 = this.colors_dic[this.selected_title_color1];
    }
  },

javascript vue.js

Answer 1

Answer №1

To achieve the desired result, it is recommended to utilize a computed property for handling the style modifications.
This method will automatically adapt to any changes in props.
In cases where specific conditions need to be met, adjustments can be made based on these conditions within the computed callback function. An example with darkmode has been included to illustrate this approach.

export default {
  data(){ return {
        selected_title_color1:'',
        titleColor1:'',
        colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
        colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
        modalVisible1: true,
        darkmode: false, // example value
  }},

  watch:{
    selected_title_color1: function () {
      this.titleColor1 = this.colors_dic[this.selected_title_color1];
    }
  },

  computed: {
     // Implement your custom styling here.
     // Return an Object that will be bound to the style prop.  
     // Any changes in reactive values will be reflected immediately.  
     style(){
        // Define the base style here.        
        let newStyle = {}

        // Incorporate the titleColor1 which yields style="{color:titleColor1}"
        if(this.titleColor1){
          this.color = this.titleColor1
        }

        // Additional conditions can also be added here, such as a darkmode option.
        if(this.darkmode){
          this.backgroundColor = '#222222'
        }       

       return newStyle
    }
 },

 methods: {
    // Other methods can be included here 
 }
}

Assign this computed styling to your div using :style="style".

<div class="l-modal" v-if="modalVisible1">
     <div class="p-modal" @click="hide_modal" :style="style" ref="test">
       <p>{{titleTxt1}}</p>
       <p>{{contentTxt1}}</p>
       <p>{{endTxt1}}</p>
       <button class="p-modal__btn">{{buttonTxt1}}</button>
     </div>
</div>
<div class="l-modal__bg" v-if="modalBgVisible1" @click="hide_modal"></div>

A suggestion would be to extract the color-setting code into a separate method and link it to an event that triggers the color change instead of relying solely on a watcher. This can enhance flexibility and streamline the code, though your current implementation is functional as well.

Answer 2

To achieve the desired result, it is recommended to utilize a computed property for handling the style modifications.
This method will automatically adapt to any changes in props.
In cases where specific conditions need to be met, adjustments can be made based on these conditions within the computed callback function. An example with darkmode has been included to illustrate this approach.

export default {
  data(){ return {
        selected_title_color1:'',
        titleColor1:'',
        colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
        colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
        modalVisible1: true,
        darkmode: false, // example value
  }},

  watch:{
    selected_title_color1: function () {
      this.titleColor1 = this.colors_dic[this.selected_title_color1];
    }
  },

  computed: {
     // Implement your custom styling here.
     // Return an Object that will be bound to the style prop.  
     // Any changes in reactive values will be reflected immediately.  
     style(){
        // Define the base style here.        
        let newStyle = {}

        // Incorporate the titleColor1 which yields style="{color:titleColor1}"
        if(this.titleColor1){
          this.color = this.titleColor1
        }

        // Additional conditions can also be added here, such as a darkmode option.
        if(this.darkmode){
          this.backgroundColor = '#222222'
        }       

       return newStyle
    }
 },

 methods: {
    // Other methods can be included here 
 }
}

Assign this computed styling to your div using :style="style".

<div class="l-modal" v-if="modalVisible1">
     <div class="p-modal" @click="hide_modal" :style="style" ref="test">
       <p>{{titleTxt1}}</p>
       <p>{{contentTxt1}}</p>
       <p>{{endTxt1}}</p>
       <button class="p-modal__btn">{{buttonTxt1}}</button>
     </div>
</div>
<div class="l-modal__bg" v-if="modalBgVisible1" @click="hide_modal"></div>

A suggestion would be to extract the color-setting code into a separate method and link it to an event that triggers the color change instead of relying solely on a watcher. This can enhance flexibility and streamline the code, though your current implementation is functional as well.

Answer 3

Answer №2

Take a look at the code snippet below to see everything in action:

new Vue({
  el: "#demo",
  data () {
      return {
        selected_title_color1:'',
        titleColor1:'',
        colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
        colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
        modalVisible1: true,
      }
  },
  watch:{
    selected_title_color1: function () {
      this.titleColor1 = this.colors_dic[this.selected_title_color1];
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="l-modal" v-if="modalVisible1">
      <div class="p-modal" :style='{ color : titleColor1 }' ref="test">
        <p>{{ titleColor1 }} - {{ selected_title_color1 }}</p>
      </div>
</div>
<select v-model="selected_title_color1">
  <option value="" disabled>Select color</option>
  <option v-for="option in colors" v-bind:value="option">
    {{ option }}
  </option>
</select>
</div>

Answer 4

Take a look at the code snippet below to see everything in action:

new Vue({
  el: "#demo",
  data () {
      return {
        selected_title_color1:'',
        titleColor1:'',
        colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
        colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
        modalVisible1: true,
      }
  },
  watch:{
    selected_title_color1: function () {
      this.titleColor1 = this.colors_dic[this.selected_title_color1];
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="l-modal" v-if="modalVisible1">
      <div class="p-modal" :style='{ color : titleColor1 }' ref="test">
        <p>{{ titleColor1 }} - {{ selected_title_color1 }}</p>
      </div>
</div>
<select v-model="selected_title_color1">
  <option value="" disabled>Select color</option>
  <option v-for="option in colors" v-bind:value="option">
    {{ option }}
  </option>
</select>
</div>

Using v-bind to dynamically set styles in Vue.js

Answer №1

Answer №2

Similar questions

switch between showing and hiding dynamic table rows

How can I retrieve my array state in a different router page using VUEJS and VUEX?

The div layer is positioned above the flash object

Exploring Javascript parameters with the power of jquery

Is there a way to automatically hide a div based on a checkbox value when the page loads?

Ways to show a child's component element within the parent container

Is it advisable to utilize media queries and transform: translateY(-%) to position content above the mobile keyboard?

Utilizing Omit for the exclusion of nested properties within a TypeScript interface

Encountering a 401 error when submitting a form in Laravel Vue using Axios

Next.js is causing an error by not recognizing the document variable

What happens if I attempt to access an undefined value from a JSON array?

React is unable to identify the `isDisabled` attribute on a DOM element within an img tag

Create a new attribute within the ng-model object once it has been updated through ng-repeat

Displaying JSON data in a browser using Node.js without the need for refreshing the page

Transforming objects into nested structures

Is there a syntax error in Javascript when using a string and variable with the GET method?

Angular.js reports that the custom HTTP response header is missing

Unveiling the Power of Ionic and React for Component Repetition

This error is thrown when trying to access the property 'message' of an undefined value

Change the URL structure from ex.com/forum?id=1 to ex.com/#/forum?id=1 in AngularJS