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