[TDesign]记一次Radio组件的小坑体验

一、坑的发现

最近在使用tdesign-vue-next开发时，遇到了一个问题。

RadioGroup Prop 中有这么个属性 **options**(单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：Array<RadioOption>)

此处引用官方文档Radio 单选框

通过options可以快速的生成radio而无需再使用v-for，而第一个坑就出来了，这个options生成的是radio，不能选择生成radio-button。再设置variant属性后，会得到一个奇怪的**选择组**（如下图）

奇怪的选择组

个人希望可以在后面的版本中检测variant属性，自动生成radio-button

于是为了得到radio-button的效果，我改用v-for来生成radio-button，但在**选中的值**上又出来问题，选中的值value是v-model来绑定的，结果就出现这么个效果：

未选中状态

我想要的效果：

目标效果

此刻排查是不是v-model没绑定上，或者是值的类型不对的情况，发现都不是。

而是v-model一旦更新了一次值（例如2021）之后，第二次（例如2021）的值还是一样的话，貌似就不会再检测，就是出现这种未选中的状态。

二、解决办法

既然是值更新的问题，那就调整一下赋值的顺序就好了。

执行顺序：

1.赋值给选项列表。

2.赋值给选定的值。

三、小结

对于vue3和tdesign-vue-next来说还是不熟悉，以上是我的一些小小总结，如果大佬有更好解决办法或是此问题发生的原因，欢迎在评论区指正。