el-radio-group 取里面的text
时间: 2023-11-03 14:51:57 浏览: 36
要获取 `el-radio-group` 组件中选中的 `radio` 的文本值,你可以使用以下方法:
1. 给每个 `radio` 设置一个唯一的 `value` 属性,然后使用 `v-model` 双向绑定选中的值。
```html
<template>
<el-radio-group v-model="selectedValue">
<el-radio :label="option.value" v-for="option in options" :key="option.value">{{ option.text }}</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
options: [
{ value: '1', text: 'Option 1' },
{ value: '2', text: 'Option 2' },
{ value: '3', text: 'Option 3' }
]
};
}
};
</script>
```
在上面的例子中,`selectedValue` 会保存选中的 `radio` 的 `value` 属性的值。
2. 如果你只想获取选中 `radio` 的文本值,你可以使用计算属性来实现:
```html
<template>
<el-radio-group v-model="selectedValue">
<el-radio :label="option.value" v-for="option in options" :key="option.value">{{ option.text }}</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
options: [
{ value: '1', text: 'Option 1' },
{ value: '2', text: 'Option 2' },
{ value: '3', text: 'Option 3' }
]
};
},
computed: {
selectedText() {
const selectedOption = this.options.find(option => option.value === this.selectedValue);
return selectedOption ? selectedOption.text : '';
}
}
};
</script>
```
在上面的例子中,`selectedText` 是一个计算属性,它会根据 `selectedValue` 查找对应的选项,并返回选项的文本值。
你可以在模板中使用 `selectedText` 来获取选中的 `radio` 的文本值。例如:`{{ selectedText }}`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)