vuejs custom checkbox vee-validate
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.0.9/locale/ar.js"></script>
<div id="app">
<div class="row">
<p>
custom input: checkbox {{checkmeplease}}
</p>
<label>
<custom-checkbox
v-validate="'required'"
data-vv-name="checkmeplease"
label="checkmeplease"
v-model="checkmeplease"
>
</custom-checkbox>
<custom-checkbox
data-vv-name="checkmeplease"
label="checkmetoo"
v-model="checkmetoo"
>
</custom-checkbox>
</label>
<p v-show="errors.has('checkmeplease')">
{{ errors.first('checkmeplease') }}
</p>
</div>
<hr>
<div class="row">
<p>
default input: checkbox
</p>
<label>
checkmeok
<input type="checkbox" name="checkmeok" v-model='checkmeok' v-validate="'required'">
checkmeok
<input type="checkbox" name="checkmeok" v-model='checkme' v-validate="'required'">
</label>
<div v-show="errors.has('checkmeok')">Error</div>
</div>
<hr>
<p>
{{errors}}
{{validator}}
</p>
<hr>
<button @click="validate" type="button">Validate All</button>
</div>
<template id="custom-checkbox">
<div>
{{label}}
<input
v-model="value"
data-vv-value-path="value"
type="checkbox"
>
{{ value }}
</div>
</template>
JavaScript
Vue.use(VeeValidate);
Vue.component('custom-checkbox', {
template: '#custom-checkbox',
props: {
label: String,
hasError: Boolean,
value: Boolean
},
watch: {
value(value) {
this.$emit('input', value);
}
}
});
new Vue({
el: '#app',
data: {
email: '',
validator: '',
checkmeplease: false,
checkmetoo: false,
checkmeok: false,
checkme: false,
},
methods: {
validate() {
const this2 = this
this.$validator.validateAll().then(res => {
this2.validator = "haha"
if (res) {
alert('success');
return;
}
alert('failed', res);
});
}
}
});