Vue.js : comment récupérer les valeurs d'un select lors d'un @change ?

Le framework JavaScript Vue.js est utilisé pour créer des sites internet monopages ou des applications web. Il est léger et flexible. Il a été conçu pour pouvoir être adopté de manière progressive par un site existant. Pour récupérer la valeur d'un select lors d'un changement, on peut utiliser la notation JavaScript Standard, mais également s'appuyer sur les fonctionnalités proposées par le framework.

Vue.js propose l'évènement "@change", qui reprend l'évènement "onchange" de JavaScript, mais à l'intérieur du framework. Si vous utilisez cet évènement, alors vous devez créer la fonction de changement au sein du framework. On l'ajoute pour cela dans l'attribut "methods". Cette fonction sera ensuite liée à l'attribut "@change" dans le code HTML de la liste déroulante. Il faut passer l'évènement en paramètre. La valeur sélectionnée est récupérée avec l'attribut "target.value" de l'évènement. Il s'agit de la notation directement issue du JavaScript.

<select name="liste" @change="onChange($evenement)" class="form-control">
 <option value="1">Choix 1</option>
 <option value="2">Choix 2</option>
</select>

new Vue({
  ...
  methods:{
    onChange:function(evenement){
       console.log(evenement.target.value);
    }
  }
})

Le framework peut encore vous simplifier davantage le code grâce à l'attribut "v-model". Il permet de "lier" une valeur au framework. Ainsi, vous avez accès en permanence à sa valeur, qui devient un attribut du framework. Vous pouvez même choisir une option par défaut en l'indiquant dans l'attribut "data". Cette technique est une des utilisations de base du framework. Elle permet de faire interagir plusieurs éléments de la page web entre eux. On peut par exemple modifier la valeur de la liste déroulante à partir d'une autre fonction déclenchée par un évènement qui a lieu lors d'une interaction avec un autre élément de la page.

<select v-model="monChoix" name="liste" @change="onChange($evenement)" class="form-control">
 <option value="1">Choix 1</option>
 <option value="2">Choix 2</option>
</select>

new Vue({
    data:{
        monChoix : 1, // On choisit par défaut le choix 1
    },
    ...
    methods:{
        onChange:function(evenementt){
            console.log(this.monChoix); //On y accède de n'importe où dans le framework
        }
    }
})

JavaScript