Vue, comment utiliser v-model

La directive Vue v-model nous permet de créer une liaison bidirectionnelle. Apprendre comment l'utiliser

Lev-modelLa directive Vue nous permet de créer une liaison bidirectionnelle.

Vous pouvez par exemple lier un élément d'entrée de formulaire et lui faire changer la propriété de données Vue lorsque l'utilisateur modifie le contenu du champ:

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>
<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

Modificateurs de directives pratiques

Pour effectuer la mise à jour du modèle lorsque l'événement de modification se produit, et non à chaque fois que l'utilisateur appuie sur une touche, vous pouvez utiliserv-model.lazyau lieu de justev.model.

Travailler avec les champs de saisie,v-model.trimest utile car il supprime automatiquement les espaces.

Et si vous acceptez un nombre au lieu d'une chaîne, assurez-vous d'utiliserv-model.number.

Propriétés imbriquées

Supposons que vous ayez un panier et que vous ayez un composant contenant un formulaire pour ajouter un produit:

<template>
  <div class="">
    <h1>Add Product</h1>
    <label>Name</label>: <input>
    <label>Description</label>: <textarea></textarea>
    <button @click="addProduct">Add</button>
  </div>
</template>

<script>
export default {
name: ‘AddProduct’,
data() {
return {
product: {
name: ‘’,
description: ‘’
}
}
},
methods: {
addProduct() {
console.log(this.product)
}
}
}
</script>

Pour que le formulaire mette à jour les propriétés internes duproductvaleur de l'état, vous utilisezproduct.*:

<label>Name</label>: <input v-model="product.name">
<label>Description</label>: <textarea v-model="product.description"></textarea>

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue:


Tech Wiki en ligne!