VeeValidate 與 Data Binding
摘要：
Data Binding 為 Vue 的招牌之一，既然如此，VeeValidate 也能搭配 Data Binding 一起運作嗎 ?
Version
Vue 2.5.17
VeeValidate 2.1.2
Data Binding to String
demo.vue ...
Data Binding 為 Vue 的招牌之一，既然如此，VeeValidate 也能搭配 Data Binding 一起運作嗎 ?
Version
Vue 2.5.17
VeeValidate 2.1.2
Data Binding to String
demo.vue
<template>
<div>
<div>
<input v-validate="rules" name="email" type="text">
</div>
<div>
<span>{{ errors.first('email') }}</span>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
/** data */
const data = function() {
return {
rules: 'required|email',
};
};
export default {
name: 'demo',
data,
};
</script>
18 行
const data = function() {
return {
rules: 'required|email',
};
};
將 rule string 放在 Vue 的 data 內。
第 4 行
<input v-validate="rules" name="email" type="text">
將 VeeValidate 的 v-validate directive 繫結到 data 的 rules 。
Data Binding to Object
demo.vue
<template>
<div>
<div>
<input v-validate="rules" name="email" type="text">
</div>
<div>
<span>{{ errors.first('email') }}</span>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
/** data */
const data = function() {
return {
rules: {
required: true,
email: true,
},
};
};
export default {
name: 'demo',
data,
};
</script>
19 行
const data = function() {
return {
rules: {
required: true,
email: true,
},
};
};
rules 改用 object，每個 VeeValidate 的 rule 為 key，若為 true 則啟用 rule，若為 false 則補啟用。
string 或 object 寫法都是 VeeValidate 合法方式，若要動態 toggle rule，則 object 較方便
Conclusion
- Vee Validate 不再只是寫死在 HTML，也可以寫在 ECMAScript，再透過 Vue 的 Data Binding 繫結即可
Sample Code
完整的範例可以在我的 ofollow,noindex">GitHub 上找到