web-dev-qa-db-fra.com

Obtenir des données de formulaire lors de la soumission?

Lorsque mon formulaire est soumis, je souhaite obtenir une valeur d'entrée:

<input type="text" id="name">

Je sais que je peux utiliser des liaisons de saisie de formulaire pour mettre à jour les valeurs en une variable, mais comment puis-je le faire lors de l'envoi? J'ai actuellement:

<form v-on:submit.prevent="getFormValues">

Mais comment puis-je obtenir la valeur à l'intérieur de la méthode getFormValues?

Question secondaire, y a-t-il un avantage à le faire lors de la soumission plutôt que de mettre à jour la variable lorsque l'utilisateur entre les données via une liaison?

vue.jsvuejs2
18
panthro

Vous devez utiliser la liaison de modèle, en particulier ici, comme mentionné par Schlangguru dans sa réponse.

Cependant, il existe d'autres techniques que vous pouvez utiliser, telles que le Javascript normal ou les références. Mais je ne vois vraiment pas pourquoi vous voudriez faire cela au lieu de la liaison de modèle, cela n'a aucun sens pour moi:

<div id="app">
  <form>
    <input type="text" ref="my_input">
    <button @click.prevent="getFormValues()">Get values</button>
  </form>
  Output: {{ output }}
</div>

Comme vous le voyez, je mets ref="my_input" pour obtenir l’élément DOM d’entrée:

new Vue({
  el: '#app',
  data: {
    output: ''
  },
  methods: {
    getFormValues () {
      this.output = this.$refs.my_input.value
    }
  }
})

J'ai fait un petit jsFiddle si vous voulez l'essayer: https://jsfiddle.net/sh70oe4n/

Mais encore une fois, ma réponse est loin de ce que l'on pourrait appeler une "bonne pratique"

17
Hammerbot

L'action formulaire submit émet un événement submit , qui vous fournit notamment la cible de l'événement.

La cible de l'événement submit est un HTMLFormElement, qui possède une propriété elements. Voir ce lien MDN pour savoir comment itérer ou accéder à des éléments spécifiques par leur nom ou leur index.

Si vous ajoutez une propriété name à votre entrée, vous pouvez accéder au champ de la manière suivante dans votre gestionnaire d'envoi de formulaire:

<form @submit.prevent="getFormValues">
  <input type="text" name="name">
</form>

new Vue({
  el: '#app',
  data: {
    name: ''
  },
  methods: {
    getFormValues (submitEvent) {
      this.name = submitEvent.target.elements.name.value
    }
  }
}

Pour ce faire, les formulaires HTML fournissent déjà une logique utile, comme la désactivation de l'action submit lorsqu'un formulaire n'est pas valide, ce que je préfère ne pas réimplémenter en Javascript. Donc, si je me trouve à générer une liste d’articles qui nécessitent une petite quantité d’informations avant d’effectuer une action (par exemple, sélectionner le nombre d’articles que vous souhaitez ajouter à un panier), je peux mettre un formulaire dans chaque article, puis utiliser la validation du formulaire natif, puis extrayez la valeur du formulaire cible provenant de l'action d'envoi.

21
Sean Ray

Vous devez définir un modèle pour votre saisie.
<input type="text" id="name" v-model="name">

Ensuite, vous pouvez accéder à la valeur avec this.name Dans votre méthode getFormValues.

C’est au moins ce qu’ils font dans l’exemple officiel TodoMVC: https://vuejs.org/v2/examples/todomvc.html (Voir v-model="newTodo" En HTML et addTodo() en JS)

6
Sebastian