Skip to content

The CheckboxGroup slot not work if option[label] !== undefined #6641

@waldonUB

Description

@waldonUB
  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.20

Environment

navigator.platform: Win10; navigator.appName: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 Edg/113.0.1774.57; vue: 3.2.0

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  • First, I have this set of data.
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
];
  • Second, I want use a label slot
<a-checkbox-group v-model:value="value4" :options="options" disabled>
<template #label="{ label }">
<span style="color: red">{{ label }}</span>
</template>
</a-checkbox-group>

You'll see that the code above doesn't work because:

image.png

What is expected?

Sometimes, I want to change the label style or do special treatment of label text. I need the options[label] in the slot.

What is actually happening?

label slot not work if options[label] !== undefined


I think this component shouldn't mix slot and options attribute.If the user uses a slot, you should let him use anything, including the label.
This is my pr:

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions