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

I'm experiencing a challenge with Next.js where I am unable to use return within

Using Vue the proper method to ensure the vuex store is accessible to a dynamically generated component

What is the best way to conceal a dropdown menu when the page first loads?

Incorporating a full-page background into a specific view using AngularJS

Enhancing State Management with CombineReducers in TypeScript

Build a unique array of identifiers extracted from an object

Tips for maximizing performance in ember-data through r.js

Tips for resolving the error message: 'The "path" argument must be a string. Received type undefined' that occurs when executing 'vue add vuetify'

React's setState is not reflecting the changes made to the reduced array

Angular UI-Grid encountering difficulties in rendering secure HTML content

Retrieving information from an Express.js API using React.js. Postman requests are successfully communicating with the API

Ways to identify when a file download has finished with the help of javascript

What is the best way to embed a variable within a Directive HTML block for seamless access by the Controller?

Angular - Ensure completion of a function call before continuing with the code execution

Learn the process of using Angular Js to compare checkbox values with stored comma-separated values in a database

Guide on accessing a nested array within a JSON object using JavaScript

Navigate to a particular date with react-big-calendar

Concealing a form after submission using JavaScript

Cross-Origin Request Sharing (CORS) problem encountered while making an API call with

performing asynchronous iteration with HTTP PUT requests