解决vue中v-model双向绑定失败,表单数据不能回显的问题

解决vue中v-model双向绑定失败,表单数据不能回显的问题

在vue中使用v-model="columns[i].value"v-model="column[value]"进行双向绑定时或者在绑定事件中使用赋值形式改变绑定变量的值如:

handleChange(value){
   
switch (value){
   
          case 1:this.Model.value=600;this.Model.Precision=0;break;
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
antd of vue 的 v-decorator 表单,自定义组件(数据字典)的实现是通过使用 v-model数据双向绑定功能。首先,在自定义组件,我们需要接收一个 value 属性作为组件的值,同时也需要定义一个 input 事件来监听组件值的变化。然后,在组件的模板,我们需要使用 v-model 将传入的 value 定到组件的内部值上,并在值变化时触发 input 事件将新值传递出去。 例如,我们可以创建一个自定义的 Select 组件,用于展示数据字典的选项。在组件内部,我们可以接收一个名为 options 的数据字典数组作为组件选项的来源。在组件的模板,我们可以使用 antd 的 Select 组件将选项渲染出来,并通过 v-model 将传入的 value 定到 Select 组件的值上。 然而,在使用 v-decorator 表单装饰器时,由于 antd of vue 的组件在进行数据定时只能通过 v-model 进行双向绑定,因此在使用自定义组件时会出现值不能回显问题。这是由于 v-decorator 表单装饰器只能通过获取组件的 value 属性来获取表单的值,而自定义组件的值是通过 input 事件进行传递的,和 value 属性并没有直接关联。 解决这个问题的方法是,在自定义组件,我们需要在值变化时手动触发 v-decorator 表单装饰器的 onChange 事件,并将新的值作为参数传递出去。这样,在表单提交或重置时,v-decorator 表单装饰器就能正确地获取到自定义组件的值,并进行数据回显。 总之,通过使用 v-model 和手动触发 onChange 事件,我们可以在 antd of vue 的 v-decorator 表单实现自定义组件(数据字典)的双向绑定和值回显

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值