vue antd用initialValue初始值怎样能触发change 事件

<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方法来延迟执行。