web-dev-qa-db-fra.com

Empêcher l'envoi du formulaire en appuyant sur entrée à partir d'une entrée de texte, à l'aide de Vue.js

J'utilise Vue.js dans mon application et j'ai une saisie de texte dans un formulaire

<div id="myVueForm">
<form>
   <input type="text"  v-on="keyup:addCategory | key 'enter'">

   <!-- more form fields -->
   <button type="submit">Submit Form</button>
</form>
</div>

Dans mon exemple Vue, j'ai les éléments suivants

new Vue({
    el: '#myVueForm',

    methods: {
        addCategory: function(e)
        {
           if(e) e.preventDefault();
           console.log("Added a new category, thanks!");
        }
    }
});

Malgré l'appel preventDefault();, lorsqu'un utilisateur appuie sur entrée alors que le texte saisi est saisi, le formulaire est toujours soumis (bien que la méthode addCategory() soit déclenchée). Ce comportement peut être démontré dans ce violon .

Je sais que je peux utiliser jQuery pour capturer l'événement et empêcher la soumission, mais j'aimerais voir s'il est possible de le faire dans Vue, car cela semble être un usage courant.

javascripthtmlvue.js
17
harryg

La soumission est toujours déclenchée en mode keydown. Donc utilisez keydown au lieu de keyup.

<input type="text"  v-on="keydown:addCategory | key 'enter'">
32
Sebastian Nette

Voici une solution pour Vue.js 2.x:

<input type='text' v-on:keydown.enter.prevent='addCategory' />
27
bradlis7

pourquoi ne pas simplement désactiver la soumission de formulaire?

<form v-on:submit.prevent><input .../></form>
20
Clem

Vue.js 1.0 vous pourriez faire:

<input type="text" @keyup.enter.prevent="addCategory">
9
Ryun

Vous pouvez utiliser ceci: 

HTML

<form name="..." @submit.prevent="onSubmitMethod">

JS

methods: {
  onSubmitMethod() {

  }
}
1
Rafael Andrs Cspedes Basterio

Vous pouvez obtenir un événement à partir du code HTML et l’envoyer à Vue simplement pour éviter les défauts comme ceci:

HTML

<input type="text" v-on:keydown.13="my_method($event)">

JS

methods: {
    my_method(event){
        // do something
        if (event) event.preventDefault();
        if (event) event.stopPropagation();
    },
},
0
Yevgeniy Afanasyev

j'ai écrit un assistant pour cela.

export const preventFormSubmitOnEnter = {
  mounted() {
    let cb = event => {
      if (event) event.preventDefault();
    };
    if (this.$el.nodeName.toLowerCase() === "form") {
      this.$el.onsubmit = cb;
    } else {
      const forms = this.$el.getElementsByTagName("form");
      for (let i = 0; i < forms.length; i++) {
        const form = forms[i];
        if (form) form.onsubmit = cb;
      }
    }
  }
};

Incluez ce mixin dans votre composant vue et cela fonctionnera automatiquement. 

voici un exemple (Im using ElementUI): 

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item prop="reference">
      <el-input v-model="form.reference" placeholder="Your Reference"/>
    </el-form-item>
  </el-form>
</template>

<script>
import { preventFormSubmitOnEnter } from "./util";

export default {
  mixins: [preventFormSubmitOnEnter],
  data() {
    return {
      form: {
        reference: ""
      },
      rules: {
        reference: [{ required: true, message: "Reference is required!" }]
      }
    };
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          this.$emit("on-validate", valid, this.form);
          resolve(valid);
        });
      });
    },
    validateField(prop) {
      this.$refs.form.validateField(prop);
    }
  }
};
</script>
0
Stefan Quy