Skip to content

[URadioGroup] Typing Issue on Label Slots #4533

@tefanhhh

Description

@tefanhhh

Environment

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.2.0

Reproduction

<template>
  <URadioGroup
    color="primary"
    variant="card"
    orientation="horizontal"
    indicator="hidden"
    :items="items">
    <template #label="{ item }">
      <h4>{{ item.label }}</h4>
    </template>
  </URadioGroup>
</template>
<script lang="ts" setup>
import type { RadioGroupItem } from '@nuxt/ui'
const items = ref<RadioGroupItem[]>([
  {
    label: 'Telegram',
    value: 'Telegram',
    description: 'Telegram',
  },
  {
    label: 'Whatsapp',
    value: 'Whatsapp',
    description: 'Whatsapp',
  },
  {
    label: 'Instagram',
    value: 'Instagram',
    description: 'Instagram',
  },
  {
    label: 'Facebook',
    value: 'Facebook',
    description: 'Facebook',
  },
])
</script>

Description

There is a type issue on the item props of the label slots, when i try to accessing item.label.

There error message is:

Property 'label' does not exist on type '(AcceptableValue | { [x: string]: any; label?: string | undefined; description?: string | undefined; disabled?: boolean | undefined; value?: AcceptableValue | undefined; class?: any; ui?: { ...; } | undefined; }) & { ...; }'.
  Property 'label' does not exist on type 'string & { id: string; }'.ts-plugin(2339)

here is the screenshot:

Image Image

Additional context

No response

Logs

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingv3#1289

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions