# Liaisons des champs de formulaire

# Usage Basique

Vous pouvez utiliser la directive v-model pour créer des liaisons de données bidirectionnelles sur les éléments input, textarea, et select d'un formulaire. Il choisit automatiquement la bonne façon de mettre à jour l'élément en fonction du type d'entrée. Bien qu'un peu magique, v-model est essentiellement du sucre syntaxique pour mettre à jour les données lors des évènements de saisie utilisateur sur les champs de formulaires, ainsi que quelques traitements spéciaux pour certains cas particuliers.

Note

v-model ignorera les attributs initiaux value, checked ou selected trouvés sur tous les éléments de formulaire. Il traitera toujours les données d'instance active courante comme seule source de vérité. Vous devez déclarer la valeur initiale du côté JavaScript, dans l'option data de votre composant.

v-model utilise en interne différentes propriétés et émet différents événements pour différents éléments d'entrée:

les éléments text et textarea utilisent la propriété value et l'événement input;
les checkbox et les boutons radio utilisent la propriété checked et l'événement change;
les champs select utilisent la propriété value et l'événement change.

Note

Pour les langues qui nécessitent une IME (opens new window) (Chinois, Japonnais, Koréen etc.), vous remarquerez que v-model n'est pas mis à jour pendant la composition IME. Si vous souhaitez également prendre en charge ces mises à jour, utilisez plutôt l'événement input.

# Texte

<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>

1
2

See the Pen Handling forms: basic v-model by Vue (@Vue) on CodePen.

# Texte multiligne

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>

1
2
3
4

See the Pen Handling forms: textarea by Vue (@Vue) on CodePen.

L'interpolation sur les textareas ne fonctionnera pas. Utilisez plutôt v-model.

<!-- mauvais -->
<textarea>{{ text }}</textarea>

<!-- bon -->
<textarea v-model="text"></textarea>

1
2
3
4
5

# Checkbox

Simple checkbox, valeur booléenne:

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

1
2

See the Pen Handling forms: checkbox by Vue (@Vue) on CodePen.

Checkbox multiple, liés au même tableau:

<div id="v-model-multiple-checkboxes">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
</div>

1
2
3
4
5
6
7
8
9
10

Vue.createApp({
  data() {
    return {
      checkedNames: []
    }
  }
}).mount('#v-model-multiple-checkboxes')

1
2
3
4
5
6
7

See the Pen Handling forms: multiple checkboxes by Vue (@Vue) on CodePen.

# Bouton Radio

<div id="v-model-radiobutton">
  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <span>Picked: {{ picked }}</span>
</div>

1
2
3
4
5
6
7
8
9

Vue.createApp({
  data() {
    return {
      picked: ''
    }
  }
}).mount('#v-model-radiobutton')

1
2
3
4
5
6
7

See the Pen Handling forms: radiobutton by Vue (@Vue) on CodePen.

# Bouton Select

select à choix unique:

<div id="v-model-select" class="demo">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

1
2
3
4
5
6
7
8
9

Vue.createApp({
  data() {
    return {
      selected: ''
    }
  }
}).mount('#v-model-select')

1
2
3
4
5
6
7

See the Pen Handling forms: select by Vue (@Vue) on CodePen.

Note

Si la valeur initiale de votre expression v-model ne correspond à aucune des options, l'élément <select>sera rendu dans un état "non sélectionné". Sur iOS, cela empêchera l'utilisateur de sélectionner le premier élément car iOS ne déclenche pas d'événement de modification dans ce cas. Il est donc recommandé de fournir une option désactivée avec une valeur vide, comme illustré dans l'exemple ci-dessus.

select à choix multiples (liés à un tableau):

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br />
<span>Selected: {{ selected }}</span>

1
2
3
4
5
6
7

See the Pen Handling forms: select bound to array by Vue (@Vue) on CodePen.

Options dynamiques générés avec v-for:

<div id="v-model-select-dynamic" class="demo">
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

1
2
3
4
5
6
7
8

Vue.createApp({
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}).mount('#v-model-select-dynamic')

1
2
3
4
5
6
7
8
9
10
11
12

See the Pen Handling forms: select with dynamic options by Vue (@Vue) on CodePen.

# Liaisons de la propriété `value`

Pour les options radio, checkbox et select, les valeurs de liaison v-model sont généralement des chaînes statiques (ou des booléens pour la checkbox):

<!-- `picked` est une chaîne de caractère "a" quand le bouton est coché -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` est soit true ou false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` sera une chaine de caractères "abc" quand la première option sera sélectionnée -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

1
2
3
4
5
6
7
8
9
10

Mais parfois, nous pouvons vouloir lier la valeur à une propriété dynamique sur l'instance active courante. Nous pouvons utiliser v-bind pour y parvenir. De plus, l'utilisation de v-bind nous permet de lier la valeur d'entrée à des valeurs qui ne sont pas des chaines de caractères.

# Checkbox

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

// lorsque c'est coché:
vm.toggle === 'yes'
// lorsque que c'est décoché:
vm.toggle === 'no'

1
2
3
4

Tip

Les attributs true-value et false-value n'affectent pas l'attribut value, car les navigateurs n'incluent pas de cases non cochées dans les soumissions de formulaires. Pour garantir que l'une des deux valeurs est soumise dans un formulaire (par exemple, «oui» ou «non»), utilisez plutôt des boutons radio.

# Radio

<input type="radio" v-model="pick" v-bind:value="a" />

// quand c'est coché:
vm.pick === vm.a

1
2

# Options de select

<select v-model="selected">
  <!-- objet littéral inline  -->
  <option :value="{ number: 123 }">123</option>
</select>

1
2
3
4

// qund c'est sélectionné:
typeof vm.selected // => 'object'
vm.selected.number // => 123

1
2
3

# Modificateurs

# `.lazy`

Par défaut, v-model synchronise l'entrée avec les données après chaque événementinput (à l'exception de la composition IME comme indiqué ci-dessus). Vous pouvez ajouter le modificateur lazy à la place pour synchroniser après les événements change:

<!-- synchronisé après "change" au lieu de "input" -->
<input v-model.lazy="msg" />

1
2

# `.number`

Si vous voulez que l'entrée utilisateur soit automatiquement typée sous forme de nombre, vous pouvez ajouter le modificateur number à vos entrées de formulaires gérées par v-model:

<input v-model.number="age" type="number" />

Ceci est souvent utile, car même avec type ="number", la valeur des éléments d'entrée HTML renvoie toujours une chaîne de caractère. Si la valeur ne peut pas être analysée avec parseFloat(), alors la valeur d'origine est retournée.

# `.trim`

Si vous voulez que les espaces blancs de l'entrée utilisateur soient supprimés automatiquement, vous pouvez ajouter le modificateur trim à vos entrées gérées par v-model:

<input v-model.trim="msg" />

# `v-model` avec les composants

Si vous n'êtes pas encore familiarisé avec les composants de Vue, vous pouvez ignorer cela pour le moment

Les types d'saisie intégrés au HTML ne répondront pas toujours à vos besoins. Heureusement, les composants Vue vous permettent de créer des entrées réutilisables avec un comportement entièrement personnalisé. Ces entrées fonctionnent même avec v-model! Pour en savoir plus, lisez la section entrées personnalisées dans le guide des composants.

← Gestion des Événements Les Principes de base des Composants →

# Liaisons des champs de formulaire

# Usage Basique

# Texte

# Texte multiligne

# Checkbox

# Bouton Radio

# Bouton Select

# Liaisons de la propriété value

# Checkbox

# Radio

# Options de select

# Modificateurs

# .lazy

# .number

# .trim

# v-model avec les composants

# Liaisons de la propriété `value`

# `.lazy`

# `.number`

# `.trim`

# `v-model` avec les composants