v-model和v-decorator同用时的赋值方法

vue中v-model和v-decorator的使用

Vue中,使用v-model来进行数据绑定,在Vue-Ant Design 框架的使用中,会有v-decorator的使用,但是两者同时使用的时候,v-model数据绑定却会失效,使用this.name可以获取到组件的值,但是却不能给组件赋值。即使用v-decorator后,组件的赋值方式变了

v-decorator

v-decorator 是 Ant Design 的控件验证属性。

经过 getFieldDecorator 或 v-decorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
不再需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。
不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
不能用 v-model,可以使用 this.form.setFieldsValue 来动态改变表单值。
v-decorator 取值:

this.form.validateFields((err, values) => {
  if (err) {
    console.log(values) // { name: '' }
  }
})
v-decorator 赋值:
this.form.setFieldsValue({
  name: '设置值'
})
清空表单数据:
this.form.resetFields
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值