
Jquery iCheck displays a nice looking checkboxes instead of the native html checkbox. In this snippet we will make a custom Vue component of this iCheck input.
ICheckInput.vue
<template> <div class="checkbox"> <label> <input :type="type" ref="checkboxref" :name="name" :value="value" :checked="defaultChecked" /> <strong>{{text}}</strong> </label> </div> </template> <script> export default { name: "ICheckInput", props: ["value", "text", "name", "type", "defaultChecked"], mounted() { const self = this; $(document).ready(function () { $(`input[name=${self.$refs.checkboxref.name}]`).iCheck({ checkboxClass: 'icheckbox_square-yellow', radioClass: 'iradio_square-yellow', increaseArea: '20%' }); $(document).on("ifChecked ifUnchecked", `input[name=${self.$refs.checkboxref.name}]`, function (e) { if(e.type === 'ifChecked') { self.$emit('onChecked', e.target.value); } else if (e.type === 'ifUnchecked') { self.$emit('onUnchecked', e.target.value); } }); }); } } </script>
This component accept several props (name, value, text, type, defaultChecked). In the mounted lifecycle hook i initialize the iCheck input using the jquery selector syntax. Refer to the library docs for more info.
The component handles emitting two custom events which are (onChecked, onUnchecked)
Usage:
<ICheckInput type="checkbox" name="accept_terms" value="1" :defaultChecked="false" text="Accept terms and conditions." v-on:onChecked="handleOncheck" v-on:onUnchecked="handleOnUncheck" />
Usage as radio button:
<ICheckInput type="radio" name="accept_terms" value="1" text="Accept terms and conditions." />
What's your reaction?
Excited
1
Happy
2
Not Sure
2
Confused
1