<a-form-item label="类型">
<a-radio-group
button-style="solid"
@change="typeChange"
v-decorator="[
'type',
{ initialValue: String(model.type) }
]"
>
<a-radio-button value="1">输入</a-radio-button>
<a-radio-button value="2">单选</a-radio-button>
</a-radio-group>
</a-form-item>
有一个radio group 的组件 ,v-decorator 初始化绑定的,而且设置了初始值。但是change事件没有触发到
methods: {
typeChange(e){
console.log('type change---> ',e.target.value);
this.radioType = parseInt(e.target.value)
}
}
参考GPT和自己的思路:
关于vue antd用initialValue初始值能否触发change事件的问题,我的回答如下:
对于antd的表单组件,在初始化绑定v-decorator时,如果设置了initialValue属性,这个值并不会触发change事件,因为它只是表单的初始值,不是用户实际操作后的新值。所以在你的代码中,初始值不会触发change事件。
如果你想在初始值就触发change事件,可以考虑使用watch属性来监听初始值的变化,然后手动触发change事件,例如:
<template>
<a-form-item label="类型">
<a-radio-group
button-style="solid"
@change="typeChange"
v-decorator="[
'type',
{ initialValue: String(model.type) }
]"
>
<a-radio-button value="1">输入</a-radio-button>
<a-radio-button value="2">单选</a-radio-button>
</a-radio-group>
</a-form-item>
</template>
<script>
export default {
data() {
return {
model: {
type: 1
}
}
},
watch: {
'model.type': function(newVal, oldVal) {
if(newVal !== oldVal) {
this.$nextTick(() => {
this.$refs.type.$el.dispatchEvent(new Event('change'));
});
}
}
},
methods: {
typeChange(e) {
console.log('type change---> ',e.target.value);
this.radioType = parseInt(e.target.value)
}
}
}
</script>
在watch属性中监听model.type值的变化,然后手动触发change事件,这样在初始值变化时就能够触发change事件了。需要注意的是,手动触发事件需要等到dom渲染完成后才能进行,所以需要使用$nextTick方法来延迟执行。