---

Dans les articles précédents, nous avons abordé les différentes Directives ainsi que l'intégration de VueJS dans un projet existant via le CDN.

Nous allons aujourd'hui découvrir les Methods & les Watchers.
👉 Vous pouvez retrouver la documentation des Methods ici

👉 Vous pouvez retrouver la documention des Watchers ici

VueJS Methods

Voici la structure des méthodes:

<script>
  let app = new Vue({
    el: "#app",
    data: {
       // ... 
    },
    // 
    methods: {
      votrePremiereMethod() {
        // ... 
      },
      votreDeuxiemeMethod() {
        // ...
      },
    // etc...
    },
  });
</script>

Les méthodes permettent d'exécuter du code au sein de l'instance VueJS. Les méthodes peuvent être exécutées via les expressions des directives.

  <!-- Nous pouvons rajouter la méthode 'plus' dans l'expression de la directive v-on: (abrégée @) -->
  <button @click="plus">
    +
  </button>

Si l'on souhaite faire référence à Data, nous utiliserons this au sein de notre méthode. Il est possible d'utiliser des fonctions fléchées, cependant dans ce cas this fera référence au parent, et non plus à Data.

<section id="app">
  <!-- Nous affichons la Data 'product' -->
  Acheter {{ product }} 🍌

  <!-- En appuyant sur le boutton, nous exécutons la méthode 'plus' -->
  <button @click="plus">
    +
  </button>
</section>

<script>
  let app = new Vue({
    el: "#app",
    data: {
      product: 1
    },
    methods: {
      plus() {
        let product
        // product fais ici référence à la variable ci-dessus, pésente dans le scope
        product = "huh?" // Ne changera pas dans notre Data
        // this fais ici référence à data
        this.product++ // nous incrémentons le product dans Data de 1
      },
    },
  });
</script>

Il est tout à fait possible d'utiliser des arguments dans nos methodes

<section id="app">
  Acheter {{ product }} 🍌

  <button @click="plus(10)">
    +
  </button>
</section>

<script>
  let app = new Vue({
    el: "#app",
    data: {
      product: 1
    },
    methods: {
      plus(myNum) {

        this.product = this.product + myNum  
        // Nous incrémentons 'product' de 10
      },
    },
  });
</script>

Exercice

En reprenant l'exemple fourni ci-dessus , créer l'application suivante :

• Lorsque le compteur est égal ou supérieur à 10 => le boutton '+' doit augmenter le compteur de 10
• Lorsque le compteur est supérieur à 10 => le bouton '-' doit soustraire 10

Voici le résultat attendu :

Pour 👀 l'une des réponses possibles : jsfiddle.net/Icesofty/4sjakx3v/7

VueJS Watch

Documentation officielle

Il est possible d'ajouter des watchers (ou observateurs) dans votre projet VueJS. Un Watcher est en charge de surveiller les changements des expressions. (Par exemple, lorsque nous incrémentons {{ product }} ). À chaque changement, le code situé dans l'observateur est exécuté. Deux arguments sont disponibles, au besoin : l'ancienne valeur et la nouvelle valeur.

<section id="app">

Acheter {{ product }} 🍌

</section>

<script>
  let app = new Vue({
    el: "#app",
    data: {
      product: 1,
    },
        watch : {
        // S'exécute à chaque changement de product
         product(nouvelleValeur, ancienneValeur) {
            /** votre code **/
         }
        }
  });

</script>

Exercice

En reprenant le modèle ci-dessous, créer l'application suivante :

• Lorsque la liste est vide, afficher le message d'erreur
• Lorsque la liste n'est plus vide, ne plus afficher le message d'erreur

Voici le résultat attendu (mettre la liste à 0 ) :

---