<u-checkbox-group v-model="optionRadio" placement="column"> <u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in optionList" :key="index" :label="item.name" :name="item.id" @change="change"> </u-checkbox > </u-checkbox-group>获取选中后的值的id
时间: 2023-07-08 13:43:15 浏览: 348
你可以通过在 `change` 事件中获取选中的值来实现。在 `change` 方法中,你可以使用 `$event` 参数获取选中的值,然后将其存储在 `optionRadio` 中,代码如下所示:
```javascript
data() {
return {
optionRadio: [], // 存储选中的值的id
optionList: [ // 选项列表
{
id: 1,
name: '选项1'
},
{
id: 2,
name: '选项2'
},
{
id: 3,
name: '选项3'
}
]
}
},
methods: {
change($event) {
this.optionRadio = $event.map(item => item.name)
}
}
```
在模板中,你可以通过 `v-model` 绑定 `optionRadio`,同时在 `u-checkbox` 中使用 `@change` 监听选项的变化,代码如下所示:
```html
<u-checkbox-group v-model="optionRadio" placement="column">
<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in optionList" :key="index" :label="item.name" :name="item.id" @change="change">
</u-checkbox>
</u-checkbox-group>
```
在 `change` 方法中,我们使用 `map` 方法将 `$event` 转换为一个数组,该数组包含选中的值的 `name` 属性。最后,我们将该数组赋值给 `optionRadio`,以便在后续操作中使用选中的值的id。
阅读全文
相关推荐

















