vue中使用iview表單驗證時this指標問題

2022-03-04 17:17:11 字數 922 閱讀 6084

使用iview,在提交時對值b進行驗證,使其不能大於值a

export default ,

configrules:

return callback();}}

]}};},

}

此時,validator驗證函式中this.config.a根本取不到值。

通過列印this,發現此時this沒有指向vue例項,

而是指向呼叫validator函式的物件,iview這裡會用乙個驗證相關的物件,長這樣

而這個物件中並沒有config.a。

這裡根本原因是普通函式中的this會指向呼叫時的函式作用域上,這裡validator函式是被這個驗證物件呼叫的,所以this指向了它

將validator使用箭頭函式的形式:

validator: (rule, value, callback) => 

return callback();

}

箭頭函式本身是沒有this的,它的this是包含箭頭函式的第乙個普通函式中的this;

如果箭頭函式沒有被普通函式包含,那麼它的this會指向到定義時的作用域上;

這裡指向了當前vue例項,從而能夠正確獲取this.config.a

這裡通過閱讀資料總結了一下關於this指向的情況:

iView表單空格驗證

iview表單元件使用async validator驗證器對表單域中資料進行驗證,給 form 設定屬性 rules,同時給需要驗證的 formitem 設定屬性 prop 指向對應字段即可。完整的驗證規則請參照開源專案 async validator。驗證方法也支援 promise。當我們對表單中...

iView表單空格驗證

iview表單元件使用async validator驗證器對表單域中資料進行驗證,給 form 設定屬性 rules,同時給需要驗證的 formitem 設定屬性 prop 指向對應字段即可。完整的驗證規則請參照開源專案 async validator。驗證方法也支援 promise。當我們對表單中...

iview 的表單驗證

iview官方文件 html forminline model forminline rules ruleinline inline 上下 display flex margin top 24px up text v model forminline.up placeholder 向上度數 numb...