v-bind : style pour les valeurs dynamiques dans Vue.js

Question

Lorsque j'ai utilisé v-bind:style pour utiliser des valeurs dynamiques, j'ai été confronté au problème de v-bind:style qui ne fonctionnait pas, mais je suis sûr que v-bind:style a obtenu la valeur correcte (:style='{dans la console La couleur : rouge (toute autre valeur) }') et le CSS dans la section style sont reflétés avec succès. Pourquoi ne pas utiliser v-bind ? Des idées? ? Merci beaucoup.

<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];
    }
  },

Answer 1

Veuillez vérifier l'extrait de code suivant, tout semble bien :

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];
    }
  },
})

sssccc


      

        
{{ titleColor1 }} - {{ selected_title_color1 }}
      


  Select color
  
    {{ option }}
  

Answer 2

Comme mentionné ci-dessus, vous devez utiliser l'attribut compulated pour les styles.
Cela reflétera également automatiquement toute modification apportée à l'accessoire.
Si vous avez certaines conditions, vous pouvez également modifier les valeurs en fonction des valeurs calculées dans la fonction de rappel. J'ai ajouté un exemple de Dark Mode pour illustrer cette approche.

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: {
     // Here comes your style magic.
     // Return an Object that you will bind to the style prop.  
     // Changes to any reactive value will be reflected directly.  
     style(){
        // create the base style here.        
        let newStyle = {}

        // apply your titleColor1 which results in style="{color:titleColor1}"
        if(this.titleColor1){
          this.color = this.titleColor1
        }

        // if you would have more conditions you can add them here, too
        // just an _example_ if you would have a darkmode value in data.
        if(this.darkmode){
          this.backgroundColor = '#222222'
        }          ​
            ​
       ​return newStyle
    ​}
 ​},

 ​methods: {
    ​// rest of methods if 
 ​}
}

Ensuite, utilisez :style="style" pour l'ajouter à votre div.

     ​

       ​
{{titleTxt1}}
       ​
{{contentTxt1}}
       ​
{{endTxt1}}
       ​{{buttonTxt1}}
     ​

Conseils de mon côté. Au lieu d'utiliser un observateur, j'externaliserais le code de définition de la couleur et je lierais cette méthode à l'événement qui change la couleur. Cela peut rendre votre application plus flexible et la nettoyer. Mais ce que vous faites fonctionne aussi.