Cheaterman Posts - Answer Overflow

Cheaterman

•Created by Cheaterman on 4/11/2025 in #❓・help

Typescript and useFetch transform

I have fairly persistent issues with useFetch() and transform in typescript ; transform seems to expect the shape of the response not to change, which (at least for me) defeats the purpose

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  })
}

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  })
}

I already removed the generic argument to useAPI (which is just a useFetch wrapper) as mentioned in https://github.com/nuxt/nuxt/discussions/21248#discussioncomment-6165650 But the only way I can get typescript to somewhat cooperate is by writing

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  } as { transform(data: any): Message[] })
}

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  } as { transform(data: any): Message[] })
}

which is tedious and feels like it shouldn't be necessary

28 replies

NNuxt

•Created by Cheaterman on 4/11/2025 in #❓・help

Clearing UForm errors

I'd like to clear errors from (untouched) fields that had been previously manually set by form.setErrors() in Nuxt UI 2. I tried :

      :validate="() => {
        form!.clear()
        return []
      }"

      :validate="() => {
        form!.clear()
        return []
      }"

      :validate="() => {
        form!.clear('email')
        form!.clear('password')
        form!.clear('errors')
        return []
      }"

      :validate="() => {
        form!.clear('email')
        form!.clear('password')
        form!.clear('errors')
        return []
      }"

      :validate="() => {
        form?.setErrors([])
        return []
      }"

      :validate="() => {
        form?.setErrors([])
        return []
      }"

      :validate="() => {
        form!.errors.value = []
        return []
      }"

      :validate="() => {
        form!.errors.value = []
        return []
      }"

None of that seems to actually clear the errors on all fields, only the one that is being (or was last) touched.

14 replies

NNuxt

•Created by Cheaterman on 8/7/2024 in #❓・help

Weird :key behavior

I'm having a SUPER WEIRD issue with :key - I get some fairly random ordering of items if I use :key="mything.id" (id is a PK straight from DB so very much unique) but it works with :key="index" (in v-for="(mything, index) in mythings" - mythings being computed if that's relevant)

1 replies

NNuxt

•Created by Cheaterman on 8/5/2024 in #❓・help

Conditional :ui

Bliblibli buddiez I hope y'all doing goodie!

          <USelect
            :ui="{
              color: {
                gray: {
                  outline: (
                    'focus:ring-blue-500'
                    + (selectedState === 2 ? ' bg-red-300' : '')
                  )
                },
              },
              rounded: 'rounded-none'
            }"
          >

          <USelect
            :ui="{
              color: {
                gray: {
                  outline: (
                    'focus:ring-blue-500'
                    + (selectedState === 2 ? ' bg-red-300' : '')
                  )
                },
              },
              rounded: 'rounded-none'
            }"
          >

Currently I'm doing something like this to conditionally set the background, but it feels a bit icky to be doing string formatting (needing that leading space etc) for this, is there maybe a better way? Thanks in advance!

3 replies

Gaming

Programming