Skip to content

Instantly share code, notes, and snippets.

@BacLuc
Created November 1, 2020 15:57
Show Gist options
  • Save BacLuc/d903a83d4697954b20009943319c08a2 to your computer and use it in GitHub Desktop.
Save BacLuc/d903a83d4697954b20009943319c08a2 to your computer and use it in GitHub Desktop.
Vuetify create custom VCheckbox wrapper
<template>
<ValidationProvider
v-slot="{ errors: veeErrors }"
:name="name"
:vid="veeId"
:rules="veeRules">
<v-checkbox
v-bind="$attrs"
:hide-details="hideDetails"
:error-messages="veeErrors.concat(errorMessages)"
:label="label || name"
:class="[inputClass]"
:input-value="value"
@change="$emit('input', $event)"
v-on="$listeners">
<!-- passing through all slots -->
<slot v-for="(_, name) in $slots" :slot="name" :name="name" />
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData" />
</template>
</v-checkbox>
</ValidationProvider>
</template>
<script>
import { ValidationProvider } from 'vee-validate'
import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin'
export default {
name: 'ECheckbox',
components: { ValidationProvider },
mixins: [formComponentPropsMixin],
props: {
value: { type: Boolean, required: false }
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment