nuxt.js 服务端同构框架 andt-design change事件重复的问题

421 阅读2分钟

form 表格组件中,使用 v-decorator 绑定 a-radio-group 按钮单选组件

        <a-form-item
          label="广告组预算"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-radio-group
            v-decorator="['budget', { initialValue: 0 }]"
            @change="changBudget"
          >
            <a-radio-button :value="0">不限</a-radio-button>
            <a-radio-button :value="1">指定预算</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-if="budget"
          label=" "
          :colon="false"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input-number
            v-decorator="['day_budget']"
            :disabled="budget === 0"
            :min="500"
            :max="100000000"
            placeholder="请输入500-100000000的整数"
            style="width: 280px;margin-right: 8px"
          />
          元/天
        </a-form-item>
    changBudget() {
      this.budget = this.plan.getFieldValue('budget')
      console.log(this.budget, arguments)
      if (!this.budget) {
        this.plan.setFieldsValue({ day_budget: '' })
      }
    },

绑定 change 方法出现 两次 响应

UTOOLS1572838616605.png

打印的结果有两个,

有个是改变前的参数,有个事改变后的参数, 出现这样的问题,一定是我哪里出差了,

不绑定表单测试 change 事件是正常的

<a-radio-group @change="changBudget" >
    <a-radio-button :value="0">不限</a-radio-button>
    <a-radio-button :value="1">指定预算</a-radio-button>
  </a-radio-group>

在vue-cli 项目里测试 也是正常的


      <a-form :form="form">
        <a-form-item label="xx">
          ...
        </a-form-item>
        <a-form-item label="投放目标">
          <a-radio-group v-decorator="['pricing']" @change="changePricing">
            <a-radio-button value="PRICING_OCPM">转化量</a-radio-button>
            <a-radio-button value="PRICING_CPC">点击量</a-radio-button>
            <a-radio-button value="PRICING_CPM">展示量</a-radio-button>
            <a-radio-button value="PRICING_CPV">有效播放量</a-radio-button>
          </a-radio-group>
        </a-form-item>
      </a-form>

跟框架可能有些关系,整不明白,暂时解决方案是采用原生事件 先解决,以后有时间来深入了解

<a-form-item
  label="广告组预算"
  :label-col="{ span: 3 }"
  :wrapper-col="{ span: 12 }"
>
  <a-radio-group
    v-decorator="['budget', { initialValue: 0 }]"
    @change.native="changBudget"
  >
    <a-radio-button :value="0">不限</a-radio-button>
    <a-radio-button :value="1">指定预算</a-radio-button>
  </a-radio-group>
</a-form-item>

投放平台页面

你对这种想象有什么看法,欢迎留言评论