MAGAZINE｜イメジン – デザイン特化型クラウドソーシング

MAGAZINE

2018.04.25

ブログ

element-formでenterを押したときにsubmitする

Vue.jsはサードパーティの便利なコンポーネントライブラリがたくさん出ていて、弊社ではElementというライブラリを使っています。

今回はElementでユーザー入力を受け付けるformを作るときに使うコンポーネント、el-formについて、素のHTMLのformと同じようにEnterを押したときにsubmitする（リクエストを送信する）実装に手間取ったので、紹介します。

何が問題なの？

当初、普通にsubmitイベントのハンドラを設定すればいいのでは？と思い以下のように設定してみました。

<template>
  <el-form :model="form" ref="form" @submit="login">
    <el-form-item label="Eメール" prop="email">
      <el-input type="email" v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="パスワード" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="default">ログイン</el-button>
    </el-form-item>
  </el-form>
</template>
 
<scrip>
export default {
  name: 'LoginForm',
  data () {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },

  methods: {
    login () {
      this.$axios.post('users/login', this.form)
      .catch(err => {
        const lastField = _.last(this.$refs.form.fields)
        lastField.validateMessage = 'Eメールまたはパスワードが間違っています'
        lastField.validateState = 'error'
      })
    }
  }
}
</scrip>

これだと、loginメソッドが呼ばれませんでした。

解決

<template>
  <el-form :model="form" ref="form" @submit.native.prevent="login">
    <el-form-item label="Eメール" prop="email">
      <el-input type="email" v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="パスワード" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="default" native-type="submit">ログイン</el-button>
    </el-form-item>
  </el-form>
</template>
 
<scrip>
export default {
  name: 'LoginForm',
  data () {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },

  methods: {
    login () {
      this.$axios.post('users/login', this.form)
      .catch(err => {
        const lastField = _.last(this.$refs.form.fields)
        lastField.validateMessage = 'Eメールまたはパスワードが間違っています'
        lastField.validateState = 'error'
      })
    }
  }
}
</scrip>

直したのは3ヶ所です。

@submit -> @submit.native
.native修飾子について公式ドキュメントが見つからないのですが、これはVueコンポーネントではなくDOMのイベントに対するハンドラを設定したいときに使います。el-formコンポーネントはsubmitイベントを発火しないので、これで通常のformエレメントのsubmitイベントをキャッチします。
@submit.native -> @submit.native.prevent
本当にフォームを送信されるのは意図しないので.prevent修飾子をつけてsubmitイベントを阻止します。
<el-button native-type="submit">
native-typeプロパティを渡して、buttonエレメントにtypeアトリビュートをつけます。これをつけないとフォーム内でenterを押してもsubmitイベントが発火しませんでした。