Blog
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)

HiuZing

🍑
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)
  • 前端面试题

  • JavaScript

  • Vue2

  • port

  • CSS

  • Node.js

  • JavaScript优化

  • uniapp

  • Mini Program

  • TypeScript

  • 面向对象编程

  • UI组件

    • Ant Design of Vue

      • Ant Design of Vue-form组件
        • form组件遇到的问题
          • 1.在a-form组件中使用输入框组件时,v-model无法双向绑定数据
      • Ant Design of Vue-modal组件
    • Antd of React

  • Plugin

  • Vue3

  • 性能优化

  • Axios

  • 状态管理

  • React

  • Mock

  • Icon

  • Template

  • 构建工具

  • 项目规范配置

  • Taro

  • SVG

  • React Native

  • 前端
  • UI组件
  • Ant Design of Vue
HiuZing
2022-10-13
目录

Ant Design of Vue-form组件

# form组件遇到的问题

# 1.在a-form组件中使用输入框组件时,v-model无法双向绑定数据

场景:启用v-decorator进行输入框数据校验时,v-model绑定数据无法绑定

<a-form :form="form">
    <a-form-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input
                 placeholder="请输入商品名称"
                 v-model="goods_name"
                 v-decorator="['goods_name', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"
                 />
    </a-form-item>
</a-form>
1
2
3
4
5
6
7
8
9
data(){
	return {
		goods_name: '123',
	}
}
1
2
3
4
5

原因:发现删除v-decorator后,v-model可以正常绑定数据

解决方法:加入v-decorator后无法使用v-model进行双向数据绑定,只能通过 setFieldsValue() 方法进行数据改变

<a-form :form="form">
    <a-form-item label="商品名称">
      <a-input
        v-decorator="['goods_name', { rules: [{ required: true, message: 'Please input your note!' }] }]"
      />
    </a-form-item>
</a-form>
1
2
3
4
5
6
7
mounted(){
	this.form.setFieldsValue({
        goods_name: '1234'
    })
}
1
2
3
4
5
上次更新: 2024/08/14, 04:14:33
稳妥构造函数模式
Ant Design of Vue-modal组件

← 稳妥构造函数模式 Ant Design of Vue-modal组件→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式