Nuxt•8mo ago

Nuxt UI Form @keyup.enter sending an undefined event.data

Hello, I recently switched to Nuxt UI and it has been a great experience. I'm having an issue with the forms though. I have two issues : 1. Sometimes the Zod errors aren't displayed 2. @keyup.enter sends an undefined event.data Here is the code :

<script setup lang="ts">
  import { z } from 'zod'
  import type { FormSubmitEvent } from '#ui/types'

  const props = defineProps<{
    id: string
  }>()

  const schema = z.object({
    email: z.string().email('Invalid email'),
    current: z.boolean(),
  })

  type Schema = z.output<typeof schema>

  const state = reactive({
    email: undefined,
    current: true,
  })

  async function onSubmit(event: FormSubmitEvent<Schema>) {
    try {
      /*
      await $fetch(`/api/clients/${props.id}/email/`, {
        method: 'POST',
        body: event.data,
      })
      await refreshNuxtData(`client_${props.id}-emails`)*/
      console.log(event.data)
    } catch (error) {
      const toast = useToast()
      toast.add({
        title: 'Error',
        description: "Something went wrong",
        icon: 'i-heroicons-exclamation-triangle',
        color: 'red',
      })
    }
  }
</script>
<template>
  <UCard>
    <UForm
      :schema="schema"
      :state="state"
      class="space-y-4"
      @keyup.enter="onSubmit"
      @submit="onSubmit">
<!-- etc -->

<script setup lang="ts">
  import { z } from 'zod'
  import type { FormSubmitEvent } from '#ui/types'

  const props = defineProps<{
    id: string
  }>()

  const schema = z.object({
    email: z.string().email('Invalid email'),
    current: z.boolean(),
  })

  type Schema = z.output<typeof schema>

  const state = reactive({
    email: undefined,
    current: true,
  })

  async function onSubmit(event: FormSubmitEvent<Schema>) {
    try {
      /*
      await $fetch(`/api/clients/${props.id}/email/`, {
        method: 'POST',
        body: event.data,
      })
      await refreshNuxtData(`client_${props.id}-emails`)*/
      console.log(event.data)
    } catch (error) {
      const toast = useToast()
      toast.add({
        title: 'Error',
        description: "Something went wrong",
        icon: 'i-heroicons-exclamation-triangle',
        color: 'red',
      })
    }
  }
</script>
<template>
  <UCard>
    <UForm
      :schema="schema"
      :state="state"
      class="space-y-4"
      @keyup.enter="onSubmit"
      @submit="onSubmit">
<!-- etc -->

3 Replies

takburgerOP•8mo ago

reproduction of the two issues : https://stackblitz.com/edit/github-zzubvt?file=app.vue

Enzo F.•8mo ago

Hi, in UFormGroup you need to add the name, name="email" in the toggle input is unnecessary since it is always boolean and about the key enter, looks like you can remove it and the enter will work anyway

takburgerOP•8mo ago

thank you so much !

Gaming

Programming

Nuxt UI Form @keyup.enter sending an undefined event.data