[Component] [radio] radio无法被选中

[niuxinyu]

Bug Type: Component

Environment

• Vue Version: 3.4.27
• Element Plus Version: 2.7.3
• Browser / OS: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15
• Build Tool: Other

Reproduction

Related Component

• el-radio

Reproduction Link

Element Plus Playground

Steps to reproduce

点进去playground，点击radio

What is Expected?

应该可以被选中

What is actually happening?

radio无法被选中

Additional comments

(empty)

[warmthsea]

请使用 v-model 或者看文档是怎么用的

[niuxinyu]

请使用 v-model 或者看文档是怎么用的

参考了文档中的用法

[bsuooo]

[wzc520pyfm]

If you want use modalValue and change, you should set them at el-radio-group, and you can use change at el-radio to listen item change. Demo Link

<el-radio-group :model-value="currentValue" @change="handleChange">
    <el-radio
      v-for="item in list"
      @change="(v) => console.log('radio item has changed', v)"
      :value="item.id"
      :label="item.name"
    />
</el-radio-group>

[xiaoshuoyiyi]

我也遇到了这个问题，但是我的写法是按照文档中写的，效果如下

[wzc520pyfm]

我也遇到了这个问题，但是我的写法是按照文档中写的，效果如下

You need to set both modelValue and onChange.

[xiaoshuoyiyi]

我也遇到了这个问题，但是我的写法是按照文档中写的，效果如下

You need to set both modelValue and onChange.

那如果只是普通的选择，没有任何特殊的数据处理，都要设置onChange，那要v-model的意义是什么？

[wzc520pyfm]

我也遇到了这个问题，但是我的写法是按照文档中写的，效果如下

You need to set both modelValue and onChange.

那如果只是普通的选择，没有任何特殊的数据处理，都要设置onChange，那要v-model的意义是什么？

要么用v-model，要么用modelvalue＋onchange

[warmthsea]

如果你不使用 v-model 然后让你示例运行，那就这样，其它我觉得没什么好讨论的，组件并没有问题
model-value + value + @change

https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgeyByZWYsIHZlcnNpb24gYXMgdnVlVmVyc2lvbiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IHZlcnNpb24gYXMgZXBWZXJzaW9uIH0gZnJvbSAnZWxlbWVudC1wbHVzJ1xuaW1wb3J0IHsgRWxlbWVudFBsdXMgfSBmcm9tICdAZWxlbWVudC1wbHVzL2ljb25zLXZ1ZSdcbmNvbnN0IGxpc3QgPSBbXG57XG5pZDoxLFxubmFtZTogJ+i/meaYr+S4gCcsXG59LFxue1xuaWQ6Mixcbm5hbWU6ICfov5nmmK/kuIAnLFxufSxcbl1cbmNvbnN0IGN1cnJlbnRWYWx1ZSA9IHJlZjxhbnk+KHt9KVxuY29uc3QgaGFuZGxlQ2hhbmdlID0gKGl0ZW0pID0+IHtcbmNvbnNvbGUubG9nKGl0ZW0pXG5jdXJyZW50VmFsdWUudmFsdWUgPSBpdGVtXG59XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxue3t2dWVWZXJzaW9ufX1cbiAgPGRpdiB2LWZvcj1cIml0ZW0gaW4gbGlzdFwiPlxuICA8ZWwtcmFkaW8gOm1vZGVsLXZhbHVlPVwiY3VycmVudFZhbHVlLmlkXCIgOnZhbHVlPVwiaXRlbS5pZFwiIEBjaGFuZ2U9XCJoYW5kbGVDaGFuZ2UoaXRlbSlcIiA6bGFiZWw9XCJpdGVtLm5hbWVcIj48L2VsLXJhZGlvPlxuICA8L2Rpdj5cblxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIl9vIjp7fX0=

[xiaoshuoyiyi]

如果你不使用 v-model 然后让你示例运行，那就这样，其它我觉得没什么好讨论的，组件并没有问题 model-value + value + @change

https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgeyByZWYsIHZlcnNpb24gYXMgdnVlVmVyc2lvbiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IHZlcnNpb24gYXMgZXBWZXJzaW9uIH0gZnJvbSAnZWxlbWVudC1wbHVzJ1xuaW1wb3J0IHsgRWxlbWVudFBsdXMgfSBmcm9tICdAZWxlbWVudC1wbHVzL2ljb25zLXZ1ZSdcbmNvbnN0IGxpc3QgPSBbXG57XG5pZDoxLFxubmFtZTogJ+i/meaYr+S4gCcsXG59LFxue1xuaWQ6Mixcbm5hbWU6ICfov5nmmK/kuIAnLFxufSxcbl1cbmNvbnN0IGN1cnJlbnRWYWx1ZSA9IHJlZjxhbnk+KHt9KVxuY29uc3QgaGFuZGxlQ2hhbmdlID0gKGl0ZW0pID0+IHtcbmNvbnNvbGUubG9nKGl0ZW0pXG5jdXJyZW50VmFsdWUudmFsdWUgPSBpdGVtXG59XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxue3t2dWVWZXJzaW9ufX1cbiAgPGRpdiB2LWZvcj1cIml0ZW0gaW4gbGlzdFwiPlxuICA8ZWwtcmFkaW8gOm1vZGVsLXZhbHVlPVwiY3VycmVudFZhbHVlLmlkXCIgOnZhbHVlPVwiaXRlbS5pZFwiIEBjaGFuZ2U9XCJoYW5kbGVDaGFuZ2UoaXRlbSlcIiA6bGFiZWw9XCJpdGVtLm5hbWVcIj48L2VsLXJhZGlvPlxuICA8L2Rpdj5cblxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIl9vIjp7fX0=

你可以copy官网文档中的实例，然后版本选择v2.2.27，试试能不能跑通！

[warmthsea]

如果你不使用 v-model 然后让你示例运行，那就这样，其它我觉得没什么好讨论的，组件并没有问题 model-value + value + @change
https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgeyByZWYsIHZlcnNpb24gYXMgdnVlVmVyc2lvbiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IHZlcnNpb24gYXMgZXBWZXJzaW9uIH0gZnJvbSAnZWxlbWVudC1wbHVzJ1xuaW1wb3J0IHsgRWxlbWVudFBsdXMgfSBmcm9tICdAZWxlbWVudC1wbHVzL2ljb25zLXZ1ZSdcbmNvbnN0IGxpc3QgPSBbXG57XG5pZDoxLFxubmFtZTogJ+i/meaYr+S4gCcsXG59LFxue1xuaWQ6Mixcbm5hbWU6ICfov5nmmK/kuIAnLFxufSxcbl1cbmNvbnN0IGN1cnJlbnRWYWx1ZSA9IHJlZjxhbnk+KHt9KVxuY29uc3QgaGFuZGxlQ2hhbmdlID0gKGl0ZW0pID0+IHtcbmNvbnNvbGUubG9nKGl0ZW0pXG5jdXJyZW50VmFsdWUudmFsdWUgPSBpdGVtXG59XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxue3t2dWVWZXJzaW9ufX1cbiAgPGRpdiB2LWZvcj1cIml0ZW0gaW4gbGlzdFwiPlxuICA8ZWwtcmFkaW8gOm1vZGVsLXZhbHVlPVwiY3VycmVudFZhbHVlLmlkXCIgOnZhbHVlPVwiaXRlbS5pZFwiIEBjaGFuZ2U9XCJoYW5kbGVDaGFuZ2UoaXRlbSlcIiA6bGFiZWw9XCJpdGVtLm5hbWVcIj48L2VsLXJhZGlvPlxuICA8L2Rpdj5cblxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIl9vIjp7fX0=

你可以copy官网文档中的实例，然后版本选择v2.2.27，试试能不能跑通！

我注意到了你所说的这个问题，你使用的是 小于 2.6 的版本，然而文档是2.6 版本更新后基于新 api 的示例，或许需要重新标注一下文档的示例信息

[wzc520pyfm]

如果你不使用 v-model 然后让你示例运行，那就这样，其它我觉得没什么好讨论的，组件并没有问题 model-value + value + @change
https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgeyByZWYsIHZlcnNpb24gYXMgdnVlVmVyc2lvbiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IHZlcnNpb24gYXMgZXBWZXJzaW9uIH0gZnJvbSAnZWxlbWVudC1wbHVzJ1xuaW1wb3J0IHsgRWxlbWVudFBsdXMgfSBmcm9tICdAZWxlbWVudC1wbHVzL2ljb25zLXZ1ZSdcbmNvbnN0IGxpc3QgPSBbXG57XG5pZDoxLFxubmFtZTogJ+i/meaYr+S4gCcsXG59LFxue1xuaWQ6Mixcbm5hbWU6ICfov5nmmK/kuIAnLFxufSxcbl1cbmNvbnN0IGN1cnJlbnRWYWx1ZSA9IHJlZjxhbnk+KHt9KVxuY29uc3QgaGFuZGxlQ2hhbmdlID0gKGl0ZW0pID0+IHtcbmNvbnNvbGUubG9nKGl0ZW0pXG5jdXJyZW50VmFsdWUudmFsdWUgPSBpdGVtXG59XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxue3t2dWVWZXJzaW9ufX1cbiAgPGRpdiB2LWZvcj1cIml0ZW0gaW4gbGlzdFwiPlxuICA8ZWwtcmFkaW8gOm1vZGVsLXZhbHVlPVwiY3VycmVudFZhbHVlLmlkXCIgOnZhbHVlPVwiaXRlbS5pZFwiIEBjaGFuZ2U9XCJoYW5kbGVDaGFuZ2UoaXRlbSlcIiA6bGFiZWw9XCJpdGVtLm5hbWVcIj48L2VsLXJhZGlvPlxuICA8L2Rpdj5cblxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIl9vIjp7fX0=

你可以copy官网文档中的实例，然后版本选择v2.2.27，试试能不能跑通！

我注意到了你所说的这个问题，你使用的是 小于 2.6 的版本，然而文档是2.6 版本更新后基于新 api 的示例，或许需要重新标注一下文档的示例信息

那或许我们可以额外添加一个低于2.6版本的示例?

[warmthsea]

如果你不使用 v-model 然后让你示例运行，那就这样，其它我觉得没什么好讨论的，组件并没有问题 model-value + value + @change
https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgeyByZWYsIHZlcnNpb24gYXMgdnVlVmVyc2lvbiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IHZlcnNpb24gYXMgZXBWZXJzaW9uIH0gZnJvbSAnZWxlbWVudC1wbHVzJ1xuaW1wb3J0IHsgRWxlbWVudFBsdXMgfSBmcm9tICdAZWxlbWVudC1wbHVzL2ljb25zLXZ1ZSdcbmNvbnN0IGxpc3QgPSBbXG57XG5pZDoxLFxubmFtZTogJ+i/meaYr+S4gCcsXG59LFxue1xuaWQ6Mixcbm5hbWU6ICfov5nmmK/kuIAnLFxufSxcbl1cbmNvbnN0IGN1cnJlbnRWYWx1ZSA9IHJlZjxhbnk+KHt9KVxuY29uc3QgaGFuZGxlQ2hhbmdlID0gKGl0ZW0pID0+IHtcbmNvbnNvbGUubG9nKGl0ZW0pXG5jdXJyZW50VmFsdWUudmFsdWUgPSBpdGVtXG59XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxue3t2dWVWZXJzaW9ufX1cbiAgPGRpdiB2LWZvcj1cIml0ZW0gaW4gbGlzdFwiPlxuICA8ZWwtcmFkaW8gOm1vZGVsLXZhbHVlPVwiY3VycmVudFZhbHVlLmlkXCIgOnZhbHVlPVwiaXRlbS5pZFwiIEBjaGFuZ2U9XCJoYW5kbGVDaGFuZ2UoaXRlbSlcIiA6bGFiZWw9XCJpdGVtLm5hbWVcIj48L2VsLXJhZGlvPlxuICA8L2Rpdj5cblxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIl9vIjp7fX0=

你可以copy官网文档中的实例，然后版本选择v2.2.27，试试能不能跑通！

我注意到了你所说的这个问题，你使用的是 小于 2.6 的版本，然而文档是2.6 版本更新后基于新 api 的示例，或许需要重新标注一下文档的示例信息

那或许我们可以额外添加一个低于2.6版本的示例?

事实上数日前我在实际开发中也遇到了这个问题，checkbox & radio 的文档应该做到向前兼容
大多数用户往往是先从文档中复制代码

示例方案我觉得可行，放在文档最底部，但是在最顶部给一个地址跳转，你觉得呢？

[wzc520pyfm]

@warmthsea 既然文档示例在低版本无法运行，那我认为低版本的用法示例应该在前，就像这里: https://4x-ant-design.antgroup.com/components/tabs-cn/

[warmthsea]

@warmthsea 既然文档示例在低版本无法运行，那我认为低版本的用法示例应该在前，就像这里: https://4x-ant-design.antgroup.com/components/tabs-cn/

@btea 你觉得呢🤔

[btea]

@warmthsea @wzc520pyfm 我觉得可以，欢迎你们谁提个 PR。