有两个el-radio和一个form表单,我想点击el-radio,把文字给上面的表单赋值,应该怎么写
时间: 2024-11-20 11:09:35 浏览: 6
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
5星 · 资源好评率100%
在Vue.js中,你可以通过事件监听`@change`来实现这个功能。假设你的`el-radio`的模板结构如下:
```html
<template>
<el-form ref="myForm">
<el-form-item label="选择项">
<el-radio v-model="selectedValue" @change="handleRadioChange">选项A</el-radio>
<el-radio :value="otherOption">选项B</el-radio>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
otherOption: '其他选项',
};
},
methods: {
handleRadioChange(value) {
this.$refs.myForm.fields['选择项'].value = value; // 将选中的radio值赋给表单对应的字段
}
}
};
</script>
```
在这个例子中,`v-model`绑定到`selectedValue`,当`el-radio`的值改变时,`handleRadioChange`方法会被触发。我们通过`$refs`获取到表单元素,并设置其对应字段的值。
注意这里假设表单的第一行只有一个输入域,并且你想要将`el-radio`的值赋给这个输入域。如果有多個输入域,你需要明确指定`this.$refs.myForm.fields['选择项']`中的`'选择项'`部分为正确的字段名。
阅读全文