antd vue v

您所在的位置：网站首页 › vue设置属性后还会调onchange事件 › antd vue v

antd vue v

2023-04-27 20:58| 来源: 网络整理| 查看: 265

antd vue v-decorator的取值与赋值问题怎么解决发布时间：2023-04-27 11:07:31 来源：亿速云阅读：73 作者：iii 栏目：开发技术

今天小编给大家分享一下antd vue v-decorator的取值与赋值问题怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

antd vue 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 来动态改变表单值。

定义form：

... export default { ... data () { return { ... form: this.$form.createForm(this), } }, created () { }, ... }

v-decorator 取值：

this.form.validateFields((err, values) => { // 这里做逻辑处理 console.log(values) // { username: '' } })

v-decorator 赋值：

this.form.setFieldsValue({ username: '设置值' })

清空表单数据：

this.form.resetFieldsant design vue之v-decorator问题1.在template中直接使用

required: true 设置必填, trigger: 'blur' 设置失去焦点触发校验

2.在script中设置校验规则

template 部分

script 部分

data(){ return { form: this.$form.createForm(this), validatorRules: { password : {//name与v-decorator中属性对应 initialValue: 123456,//初始值 rules: [ { required: true, message: '请输入密码!'},//此处开启校验必填 { min: 5, message: '长度不少于 5 个字符'}, // 长度校验 { validator: this.validatePassword},//校验规则函数， ], trigger: 'blur' // 触发方式 }, }, } }, methods: { validatePassword(rule, value, callback) { } }3. 完整代码 Login export default { name: 'login', data(){ return { form: this.$form.createForm(this), validatorRules: { password : {//name与v-decorator中属性对应 initialValue: 123456,//初始值 rules: [ { required: true, message: '请输入密码!'},//此处开启校验必填 { min: 5, message: '长度不少于 5 个字符'}, // 长度校验 { validator: this.validatePassword},//校验规则函数， ], trigger: 'blur' // 触发方式 }, }, } }, created(){ // this.$nextTick(() => { // this.form.setFieldsValue({name:'yyy',password: 123}); // }) }, mounted(){ this.form.setFieldsValue({name:'yyy',password: 123}); }, methods: { handleSubmit(e) { e.preventDefault(); this.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); }, validatePassword(rule, value, callback) { } } }

注意：

确保使用 this.form.setFieldsValue({name:'yyy',password: 123}) 设置值

或者 this.form.validateFields((err, values) => { }); 获取值

之前

已经 this.$form.createForm(this)

如果在钩子函数里面使用 setFieldsValue 报类似错误

warning.js?d96e:34 Warning: You cannot set a form field before rendering a field associated with the value. You can use `getFieldDecorator(id, options)` instead `v-decorator="[id, options]"` to register it before render.

可以这样试下

this.$nextTick(() => { this.form.setFieldsValue({name:'yyy',password: 123}); })

以上就是“antd vue v-decorator的取值与赋值问题怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。

推荐阅读：如何解决antd+react项目迁移vite的问题 react脚手架create-react-app配置antd中css按需加载的坑该怎么解决

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

antd vue v-decorator 上一篇新闻：vue中axios的post请求,415错误问题怎么解决下一篇新闻：Vue不同项目之间传递、接收参数问题怎么解决猜你喜欢为什么不推荐使用BeanUtils属性转换工具怎么展示html格式的商品详情 C#的DateTime是什么 Java中join有什么用 Python面向对象编程怎么理解 JAVA变量和数据类型的知识点有哪些 IO的五种模型是什么如何实现Groovy的本地安装和Eclipse插件的配置如何编写Flink Job主程序实用的Shell脚本有哪些

【本文地址】

antd vue v

antd vue v

今日新闻

推荐新闻