Level 80
@vincej This is something I’ve done a couple of times myself. You can create a custom input component for switches:
<template>
<div class="form-check form-switch">
<input
class="form-check-input"
role="switch"
type="checkbox"
v-bind:checked="modelValue"
v-bind:id="id"
v-bind:name="name"
v-bind="$attrs"
v-on:input="onInput"
>
<label class="form-check-label" v-bind:for="id">
<slot></slot>
</label>
</div>
</template>
<script>
export default {
props: {
id: {
required: true,
type: String,
},
modelValue: {
default: false,
required: true,
type: Boolean,
},
name: {
required: true,
type: String,
},
},
emits: [
'update:modelValue',
],
inheritAttrs: false,
setup(props, { emit }) {
const onInput = (event: Event) => emit('update:modelValue', event.target.checked);
return {
onInput,
};
},
};
</script>
If you store this in a file called BootstrapSwitch.vue, then you can use it in your other components using a v-model directive:
<template>
<bootstrap-switch
id="active-switch"
name="active"
v-model="item.active"
/>
<template>
<script>
import BootstrapSwitch from './BootstrapSwitch.vue';
export default {
components: {
BootstrapSwitch,
},
setup() {
const item = getItemObjectFromSomewhere();
return {
item,
};
},
};
</script>
