web-dev-qa-db-ja.com

Vue.jsを使用して、テキスト入力からEnterキーを押したときにフォームが送信されないようにします

アプリでVue.jsを使用しており、フォーム内にテキストを入力しています

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

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

私のVueインスタンスには、次のものがあります

_new Vue({
    el: '#myVueForm',

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

preventDefault();呼び出しにもかかわらず、ユーザーがテキスト入力中にEnterキーを押すと、フォームはまだ送信されます（addCategory()メソッドは起動します）。この動作は this fiddle で実証できます。

JQueryを使用してイベントをキャッチし、サブミットを防ぐことができることは知っていますが、Vueでこれが可能になるかどうかを確認したいと思います。

javascripthtmlvue.js
30
harryg

サブミットは常にキーダウンで発生します。したがって、キーアップの代わりにキーダウンを使用します。

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

Vue.js 2.xのソリューションは次のとおりです。

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

なぜフォーム送信を無効にしないのですか？

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

あなたができるVue.js 1.0：

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

これを使用できます：

HTML

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

JS

methods: {
  onSubmitMethod() {

  }
}
6
Rafael Andrs Cspedes Basterio

送信イベントを無効にするために使用できます：

<form @submit.prevent="">

そして、フォーム送信を行う必要があるときは、次のようなものを使用します：

<button type="submit" @click="mySubmitMethod"> Send </button>
2
cjeronimomx

HTMLからイベントを取得して、Vueに送信することができます。

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();
    },
},
1
Yevgeniy Afanasyev

私はこのためのヘルパーを書きました。

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;
      }
    }
  }
};

vueコンポーネントにこのミックスインを含めると、自動的に機能します。

ここに例があります（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