iT邦幫忙

0

[vee-validate] 組件間同步驗證

https://ithelp.ithome.com.tw/upload/images/20181106/20112678ck95inqGix.jpg

--- 本文開始 ---
最近在設計時,因為一個 Vue 檔的template 有太多的 form ,都擠在同一個 vue 檔中,想說之後應該很難管理。
所以就開始研究如將所有的 Form 分類成各個小組件,也方便管理。

如個每個 Form 你有再用 Vuex 的話,在 computed 裡面,又會多出 get&set 如圖
https://ithelp.ithome.com.tw/upload/images/20181106/20112678YnuScTpMZP.png

10個 form 就會有10個,所以就想要分別提出,為每個小組件

官網相關說明

首先,我們在父層的methods 還是一樣有個 createItem ,代表當有個新增按鈕,按下執行 createItem 的方法
方法中,寫入驗證

/**
 * 新增
 * @param {Object} model
 * @param {Object} vuex
 * @param {Object} routersName
 */
createItem(model, vuex, routersName) {
    this.$validator.validateAll().then((result) => {
        if (result) {
            // 驗證成功後做些什麼!!
            return;
        }
        this.createErrorMessage();
    });
},

然後我們將 Form 分別放到各個子組件中
在 script 中,加入

export default {
    $_veeValidate: {
        validator: 'new'
    },
    inject       : ['$validator'],
}

這樣就好了嗎!顆顆~~~我原來也是這樣認為,其實還要改 vee-validate 的 config ,紅圈處加入 inject: false,這樣就大功告成

const config = {
    locale: 'zh_TW',
    inject: false
};
Vue.use(VeeValidate, config);

以上處理,就可以將各 form 表組件化,由同步驗證去處理了~~~

--- 相關連結 ---
--- 更多的文章 在痞客邦 ----
痞客邦

感謝

感謝各位的觀看!
友情連結:鑽頭-瑜誠
文中如有技術不良或寫錯的部份,如您願意指出,我們也很樂意接受您的指正,但請不要惡意攻撃,我們只是為了樂趣而寫的文章。


尚未有邦友留言

立即登入留言