🖥

Nuxt3 / Vue3 + vee-alidate4 - 入力エリアでエンターを押してもsubmitで送信しない

2023/09/01に公開

コード例

  • <Form><Field> を使わずにやってみる
  • <form> も使わずにやってみる。formではないのでエンターでそもそも送信処理は起こらない。
<template>
  <div>
    <input v-model="emailValue" type="text" />

    <button @click="submit">Submit</button>
    <p v-if="errorMessageEmail">{{ errorMessageEmail }}</p>
  </div>
</template>

<script setup>
import { useField } from 'vee-validate';

const { meta: emailValidateMeta, value: emailValue, errorMessage: errorMessageEmail } = useField("email", "required|email");

function submit(event) {
  console.log("validate check");

  if (!emailValidateMeta.valid) { return; }

  console.log(emailValue.value)
  console.log("submit");
}
</script>

動作例

image
image

環境

  • nuxt@3.0.0
  • vee-validate@4.7.3

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-13

Discussion