nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
4.07k stars 523 forks source link

if get error from backend `UForm` set all inputs attr disabled #2612

Closed aloky closed 16 hours ago

aloky commented 1 day ago

Environment

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-alpha.8

Reproduction

<UForm
    :state="state"
    :schema="schema"
    class="space-y-3"
    @submit="submit"
  >
    <UFormField
      name="text"
    >
      <UTextarea
        v-model="state.text"
        class="w-full"
        :rows="6"
        size="xl"
      />
    </UFormField>
    <UFormField
      v-if="!authUser"
      name="email"
      :label="$t('label.email')"
    >
      <UInput
        v-model="state.email"
        icon="i-solar-letter-bold-duotone"
        :placeholder="$t('placeholder.enter_email')"
        @update:model-value="state.email = $event || null"
      />
    </UFormField>
    <UButton
      block
      type="submit"
      :loading="isLoading"
      :label="$t('button.submit')"
    />
  </UForm>

Description

Why if get error from backend UForm set all inputs attr disabled?

Additional context

No response

Logs

aloky commented 1 day ago

Image

romhml commented 1 day ago

I'm guessing this related to your loading state, inputs are disabled while the form is loading. Do you mind sharing your submit function?

You should be able to use loading-auto on the button component to handle it automatically. https://ui3.nuxt.dev/components/button#loading

aloky commented 20 hours ago

@romhml Thank you, I found out why it was like that, it turns out I didn't write it catch.

aloky commented 20 hours ago

wrong

try {}
finally {}

correct

try {}
catch {}
finally {}