Comment ajouter la classe à Vue composant via $ REFS

Question

Je dois ajouter un nom de classe à certains Vue des composants à l'aide de leurs noms réfé. Les noms REF sont définis dans un fichier de configuration. Je voudrais le faire de manière dynamique, pour éviter d'ajouter de la classe manuellement sur chaque = Vue Composant.

J'ai essayé de trouver chaque composant en utilisant $ REFS et si vous avez trouvé, ajoutez le nom de la classe à la liste des classes de l'élément. La classe est ajoutée, mais elle est supprimée dès que commence l'interaction de l'utilisateur (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 devez vous assurer que ClassList.Value est un tableau. Par défaut, c'est une chaîne.

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 = ''
      }
    },
  },