web-dev-qa-db-ja.com

Vuetifyコンポーネントv-formは、宣言された@submitイベントハンドラーで応答しません

VuetifyとVueJS(最新バージョン)を使用しています。

Login.vueの小さなテンプレートは次のとおりです。

<template>
  <v-layout align-center justify-center>
    <v-flex xs12 sm8 md4>
      <v-card class="elevation-12">
        <v-toolbar dark color="success">
          <v-toolbar-title>Login form</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>
        <v-card-text>
          <v-form @submit.prevent="checkLogin">
            <v-text-field prepend-icon="person" id="userLogin" v-model="userLogin" placeholder="[email protected]"></v-text-field>
            <v-text-field prepend-icon="lock" id="userPassword" v-model="userPassword" placeholder="password" type="password"></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <!-- TODO fix the bug when form.submit not works -->
          <v-btn type="submit" color="success">Login</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
  </v-layout>
</template>

したがって、表示される場合、@ submit.preventonv-formcheckLogin呼び出しで、送信バターをクリックしたり、入力中にEnterボタンを押したりしても機能しません。 @ submitpreventなしで使用しても効果はありません。

だが!次のようにイベントハンドラーをv-btnに配置すると:

<v-btn @click.native="checkLogin">

ボタンをクリックした後(入力フィールドでEnterキーを押さないで)、すべて正常に機能します。

v-form送信イベントの処理で何が間違っているのか教えてください。ありがとうございました!

9
Clark

送信ボタンはフォーム内にないため、submitイベントをトリガーしません。

マークアップを再構築するか、フォームにidを設定して、ボタンの form属性 を使用してください。たとえば、

<v-form @submit.prevent="checkLogin" id="check-login-form">

そして

<v-btn type="submit" color="success" form="check-login-form">Login</v-btn>

注:form属性は、 Internet Explorerのすべてのバージョン では機能しません。

20
Phil