场景:在点击el-radio时,需要先判断一下,根据接口请求,判断结果决定本次点击是否有效,或二次确认时选择了取消。
1.使用v-model双向绑定,不能满足场景需求;
2.若使用value,加上@change事件,发现不能获取到点击的单选值,change事件传的时旧的value
3.结合源码分析,可以使用value,配合@input事件(需要注意版本问题)
源码如下:模板中绑定的是v-model=“model”,model是一个计算函数,,而@change事件handleChange,提交的是model,查看计算函数的get ,当前el-radio是嵌套在el-radio-group中的就取el-radio-group的value,所以value不会改变;
代码1:
<input
ref="radio"
class="el-radio__original"
:value="label"
type="radio"
aria-hidden="true"
v-model="model"
@focus="focus = true"
@blur="focus = false"
@change="handleChange"
:name="name"
:disabled="isDisabled"
tabindex="-1"
>
代码2
computed: {
model: {
get() {
return this.isGroup ? this._radioGroup.value : this.value;
},
set(val) {
if (this.isGroup) {
this.dispatch('ElRadioGroup', 'input', [val]);
} else {
this.$emit('input', val);
}
this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
}
}
}
代码3:
handleChange() {
this.$nextTick(() => {
this.$emit('change', this.model);
this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model);
});
}