antd vue v-decorator的取值與賦值問題
更新時(shí)間：2023年04月21日 16:42:19 作者：程序猿_liter
這篇文章主要介紹了antd vue v-decorator的取值與賦值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
antd vue v-decorator的取值與賦值
v-decorator 是 Ant Design 的控件驗(yàn)證屬性。
經(jīng)過 getFieldDecorator 或 v-decorator 包裝的控件，表單控件會(huì)自動(dòng)添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），數(shù)據(jù)同步將被 Form 接管
這會(huì)導(dǎo)致以下結(jié)果：
- 你不再需要也不應(yīng)該用 onChange 來做同步，但還是可以繼續(xù)監(jiān)聽 onChange 等事件。
- 你不能用控件的 value defaultValue 等屬性來設(shè)置表單域的值，默認(rèn)值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
- 你不應(yīng)該用 v-model，可以使用 this.form.setFieldsValue 來動(dòng)態(tài)改變表單值。
定義form：
<template>
? <div class="main">
? ? <a-form
? ? ? id="formLogin"
? ? ? class="user-layout-login"
? ? ? ref="formLogin"
? ? ? :form="form"
? ? ? @submit="handleSubmit"
? ? >
? ? ? ? <a-form-item>
? ? ? ? ? ? <a-input
? ? ? ? ? ? ? size="large"
? ? ? ? ? ? ? type="text"
? ? ? ? ? ? ? placeholder="賬戶: "
? ? ? ? ? ? ? v-decorator="[
? ? ? ? ? ? ? ? 'username',
? ? ? ? ? ? ? ? {initialValue:'',rules: [{ required: true, message: '請(qǐng)輸入帳戶名或郵箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
? ? ? ? ? ? ? ]"
? ? ? ? ? ? >
? ? ? ? ? ? ? <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
? ? ? ? ? ? </a-input>
? ? ? ? ? </a-form-item>
? ? </a-form>
?</div>
</template>
?
<script>
...
export default {
? ...
? data () {
? ? return {
? ? ? ...
? ? ? form: this.$form.createForm(this),
? ? }
? },
? created () {
? ??
? },
? ...
}
</script>v-decorator 取值：
this.form.validateFields((err, values) => {
? // 這里做邏輯處理
? console.log(values) // { username: '' }
})v-decorator 賦值：
this.form.setFieldsValue({
? username: '設(shè)置值'
})清空表單數(shù)據(jù)：
this.form.resetFields
ant design vue之v-decorator問題
1.在template中直接使用
required: true 設(shè)置必填, trigger: 'blur' 設(shè)置失去焦點(diǎn)觸發(fā)校驗(yàn)
<a-input
? v-decorator="['name', { rules: [{ required: true, message: '請(qǐng)輸入賬號(hào)!'}],trigger: 'blur' }]"?
?/>2.在script中設(shè)置校驗(yàn)規(guī)則
template 部分
?<a-input ? ?v-decorator="['password', validatorRules.password]" ?/>
script 部分
? ?data(){
? ? return {
? ? ? ?form: this.$form.createForm(this),
? ? ? ?validatorRules: {
? ? ? ? ? password : {//name與v-decorator中屬性對(duì)應(yīng)
? ? ? ? ? ? initialValue: 123456,//初始值
? ? ? ? ? ? rules: [
? ? ? ? ? ? ? { required: true, message: '請(qǐng)輸入密碼!'},//此處開啟校驗(yàn)必填
? ? ? ? ? ? ? { min: 5, message: '長(zhǎng)度不少于 5 個(gè)字符'}, // 長(zhǎng)度校驗(yàn)
? ? ? ? ? ? ? { validator: this.validatePassword},//校驗(yàn)規(guī)則函數(shù)，
? ? ? ? ? ? ],
? ? ? ? ? ? trigger: 'blur' // 觸發(fā)方式
? ? ? ? ? },
? ? ? ? },
? ? }
? },
? ?methods: {
? ? ? validatePassword(rule, value, callback) {
? ? ??
? ? ? }
? }3. 完整代碼
<template>
? <div class="login">
? ? <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
? ? <a-form-item label="name">
? ? ? <!-- 直接寫檢驗(yàn)規(guī)則 -->
? ? ? <a-input
? ? ? ? ?v-decorator="['name', { rules: [{ required: true, message: '請(qǐng)輸入賬號(hào)!'}],trigger: 'blur' }]"?
? ? ? />
? ? </a-form-item>
? ? <a-form-item label="password">
? ? ? <!-- 在script 里面定義更復(fù)雜的檢驗(yàn)規(guī)則, ?-->
? ? ? <a-input
? ? ? ? v-decorator="['password', validatorRules.password]"
? ? ? />
? ? </a-form-item>
? ? <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
? ? ? <a-button type="primary" html-type="submit">
? ? ? ? Login
? ? ? </a-button>
? ? </a-form-item>
? </a-form>
? </div>
</template>
<script>
export default {
? name: 'login',
? data(){
? ? return {
? ? ? ?form: this.$form.createForm(this),
? ? ? ?validatorRules: {
? ? ? ? ? password : {//name與v-decorator中屬性對(duì)應(yīng)
? ? ? ? ? ? initialValue: 123456,//初始值
? ? ? ? ? ? rules: [
? ? ? ? ? ? ? { required: true, message: '請(qǐng)輸入密碼!'},//此處開啟校驗(yàn)必填
? ? ? ? ? ? ? { min: 5, message: '長(zhǎng)度不少于 5 個(gè)字符'}, // 長(zhǎng)度校驗(yàn)
? ? ? ? ? ? ? { validator: this.validatePassword},//校驗(yàn)規(guī)則函數(shù)，
? ? ? ? ? ? ],
? ? ? ? ? ? trigger: 'blur' // 觸發(fā)方式
? ? ? ? ? },
? ? ? ? },
? ? }
? },
? 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) {
? ? ??
? ? }
? }
}
</script>注意：
確保使用 this.form.setFieldsValue({name:'yyy',password: 123}) 設(shè)置值
或者 this.form.validateFields((err, values) => { }); 獲取值
之前
已經(jīng) this.$form.createForm(this)
如果在鉤子函數(shù)里面使用 setFieldsValue 報(bào)類似錯(cuò)誤
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});
})總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中使用rem布局的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
本篇文章主要介紹了Vue.use自定義自己的全局組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue下拉列表功能實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue指令，Vue官網(wǎng)一共有提供了14個(gè)指令，下面我們就來詳細(xì)講解每一個(gè)指令的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-10-10
在Vue3架構(gòu)里,v-slot 作為作用域插槽的關(guān)鍵支撐,重塑了父子組件間數(shù)據(jù)與方法傳遞的范式,本文主要來和大家剖析一下v-slot的相關(guān)特性,需要的可以了解下2025-01-01
vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本
這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
Vue-cli 使用json server在本地模擬請(qǐng)求數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue-cli 使用json server在本地模擬請(qǐng)求數(shù)據(jù)的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-11-11
Vue2?與?Vue3?的數(shù)據(jù)綁定原理及實(shí)現(xiàn)
這篇文章主要介紹了Vue2與Vue3的數(shù)據(jù)綁定原理及實(shí)現(xiàn)，數(shù)據(jù)綁定是一種把用戶界面元素的屬性綁定到特定對(duì)象上面并使其同步的機(jī)制，使開發(fā)人員免于編寫同步視圖模型和視圖的邏輯2022-09-09
Vue編寫可顯示周和月模式的日歷 Vue自定義日歷內(nèi)容的顯示
這篇文章主要為大家詳細(xì)介紹了Vue編寫可顯示周和月模式的日歷，Vue自定義日歷內(nèi)容的顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Vue狀態(tài)機(jī)的開啟與停止操作詳細(xì)講解
Vuex是專門為Vuejs應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機(jī)快速了解與實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2023-01-01