Comment ajouter une classe à un composant Vue via $refs

Question

J'ai besoin d'ajouter un nom de classe à certains composants Vue en utilisant leurs noms de référence. Les noms de référence sont définis dans un fichier de configuration. J'aimerais le faire de manière dynamique, pour éviter d'ajouter manuellement une classe à chaque composant Vue.

J'ai essayé de trouver chaque composant en utilisant $refs et, s'ils sont trouvés, d'ajouter le nom de la classe à la liste de classes de l'élément. La classe est ajoutée, mais elle est supprimée dès que l'interaction de l'utilisateur commence (par exemple, le composant est cliqué, reçoit une nouvelle valeur, etc.).

Voici un exemple de code que j'ai essayé :

beforeCreate() {
    let requiredFields = config.requiredFields
    this.$nextTick(() => {
        requiredFields.forEach(field => {
            if(this.$refs[field]) {      
                this.$refs[field].$el.classList.add('my-class')
            }
        })
    })
}

Answer 1

Vous pouvez utiliser ceci :

this.$refs[field].$el.classList.value = this.$refs[field].$el.classList.value + 'my-class'

Answer 2

La seule chose dont vous devez vous assurer est que votre config.requiredFields doit inclure le nom de la ref en tant que string et rien de plus ou de moins ... vous pouvez y parvenir avec :

   //pour chaque ref que vous avez 
    for (let ref in this.$refs) {
        config.requiredFields.push(ref)
     }
   // donc config.requiredFields ressemblera à ceci : ['one','two']

voici un exemple d'un échantillon de travail :

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('one', {
  template: 'component number one'
})
Vue.component('two', {
  template: 'component number two'
})

new Vue({
  el: "#app",
  beforeCreate() {
    let requiredFields = ['one','two'] //  config.requiredFields devrait ressembler à cela
    this.$nextTick(() => {
        requiredFields.forEach(field => {
            if(this.$refs[field]) {      
                this.$refs[field].$el.classList.add('my-class')
            }
        })
    })
}
})

.my-class {
  color : red;
}

Answer 3

Vous devez vous assurer que classList.value est un tableau. Par défaut, c'est une chaîne de caractères.

methods: {
    onClick(ref) {
      const activeClass = 'active-submenu'
      if (!this.$refs[ref].classList.length) {
        this.$refs[ref].classList.value = [activeClass]
      } else {
        this.$refs[ref].classList.value = ''
      }
    },
  },

Answer 4

Ce post m'a énormément aidé. J'avais besoin de cibler un élément dans une boucle v-for et j'ai fini par écrire une petite méthode pour cela (j'utilise Quasar/Vue). j'espère que cela aidera quelqu'un d'autre à gagner du temps.

addStyleToRef: function(referEl, indexp, classToAdd) {
            //ajoutera une classe à un élément $ref (même dans une boucle v-for)
            //fournir le nom du $ref (referEl - txt), l'index dans la liste (indexp - int) et le nom de la classe de css (classToAdd txt)
            if ( this.$refs[referEl][indexp].$el.classList.value.includes(classToAdd) ){
                console.log('classe déjà ajoutée')
            } else {
                this.$refs[referEl][indexp].$el.classList.value = this.$refs[referEl][indexp].$el.classList.value + ' ' + classToAdd
            }  
        }