Comprendre methods dans Vue.js

Ce nouvel article s’intéresse à l’un de ces blocs : methods. C’est ici que l’on déclare les fonctions que l’interface peut déclencher : au clic sur un bouton, lors d’une saisie, ou en réaction à un événement. Les méthodes définies sont directement liées aux données, et Vue s’occupe de les connecter à l’interface.

Dans l’article Présentation et introduction à Vue.js, nous avons découvert comment une page HTML pouvait devenir interactive grâce à Vue.js. Puis, dans Plonger dans Vue.js : le rôle de createApp() et ses composants internes, nous avons exploré la structure d’une application Vue et les blocs que l’on place dans createApp().

Un exemple simple : changer une valeur

Voici un petit exemple de base pour illustrer le rôle des méthodes, voir 02-methods.shtml :

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="changeMessage">Changer le message</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: 'Bonjour'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Bienvenue dans Vue.js';
    }
  }
}).mount('#app');
</script>

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="changeMessage">Changer le message</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: 'Bonjour'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Bienvenue dans Vue.js';
    }
  }
}).mount('#app');
</script>

Dans l’article Comprendre data() dans Vue.js, nous avions vu comment une donnée comme message, déclarée dans data() avec une fonction retournant un objet, pouvait être directement modifiée dans le HTML avec une expression comme @click="message = 'Bonjour Vue !'". Ici, nous faisons la même chose, mais en séparant la logique dans une méthode appelée changeMessage().

Cette approche rend le code plus lisible et réutilisable. Les méthodes sont regroupées dans un objet methods, sans fonction return, car elles sont directement attachées à l’instance Vue. Lorsqu’on clique sur le bouton, changeMessage() est appelée, modifie message, et Vue met automatiquement à jour l’affichage. L’interaction est fluide, sans manipulation directe du DOM.

Dans notre application vidéo : interaction, filtrage, déclenchement

Dans notre projet de gestion de vidéos musicales, le bloc methods contient l’ensemble des fonctions qui déclenchent des actions : filtrer les vidéos, ouvrir une lightbox, soumettre un formulaire, réinitialiser une recherche.

Voici quelques exemples issus du code :

methods: {
  toggleForm() {
    this.formVisible = !this.formVisible;
  },
  resetFilters() {
    this.searchQuery = '';
    this.selectedGenre = null;
    this.selectedGroup = null;
  },
  openLightbox(link) {
    this.selectedImage = `https://img.youtube.com/vi/${link}/maxresdefault.jpg`;
    this.lightboxVisible = true;
  }
}

methods: {
  toggleForm() {
    this.formVisible = !this.formVisible;
  },
  resetFilters() {
    this.searchQuery = '';
    this.selectedGenre = null;
    this.selectedGroup = null;
  },
  openLightbox(link) {
    this.selectedImage = `https://img.youtube.com/vi/${link}/maxresdefault.jpg`;
    this.lightboxVisible = true;
  }
}

Et voici comment ces méthodes sont appelées dans le HTML :

<button @click="toggleForm">Ouvrir le formulaire</button>
<button @click="resetFilters">Réinitialiser</button>
<img @click="openLightbox(video.VIDEO_LINK)" />

<button @click="toggleForm">Ouvrir le formulaire</button>
<button @click="resetFilters">Réinitialiser</button>
<img @click="openLightbox(video.VIDEO_LINK)" />

Chaque fonction modifie une ou plusieurs données déclarées dans data(). Vue suit le changement, et met à jour automatiquement les éléments affectés dans l’interface. L’utilisateur voit immédiatement le résultat, sans aucun rechargement.

Cas particuliers et bonnes pratiques

Dans le bloc methods, chaque fonction a accès aux données définies dans data() via le mot-clé this. Vue établit ce lien automatiquement : this.message fait référence à la propriété message déclarée plus haut. Attention toutefois à ne pas utiliser de fonctions fléchées (=>) dans methods : elles ne possèdent pas leur propre contexte this, ce qui empêche Vue de faire le lien avec l’instance. Les méthodes doivent toujours être déclarées avec la syntaxe classique.

// Bonne pratique
methods: {
  changeMessage() {
    this.message = 'Texte mis à jour';
  }
}

// À éviter
methods: {
  changeMessage: () => {
    this.message = 'Texte incorrectement lié';
  }
}

// Bonne pratique
methods: {
  changeMessage() {
    this.message = 'Texte mis à jour';
  }
}

// À éviter
methods: {
  changeMessage: () => {
    this.message = 'Texte incorrectement lié';
  }
}

Conclusion

Le bloc methods permet de donner du mouvement à l’interface. Il contient les fonctions que l’utilisateur peut déclencher, mais aussi celles qui pilotent la logique de l’application. En manipulant les données définies dans data(), ces méthodes déclenchent automatiquement les mises à jour visuelles dans la page.

Avec Vue, les actions ne sont plus dissociées des données. C’est le modèle qui guide les interactions, et non l’inverse. En organisant clairement vos méthodes, vous structurez à la fois le comportement de l’application et sa lisibilité.