I am facing an issue with my checkbox component. I want to utilize Fallthrough attributes to pass non-declared attributes to the input inside the checkbox component. However, when I add HTML attributes to the Vue component, those attributes are applied not only to the input within the container but also to the container element of the checkbox component.
Here is the HTML code for my component:
<template>
<div class="form-checkbox">
<v-label
v-if="legend"
:suffix="legendSuffix"
:for="$attrs.id || uid"
:helper="helperText"
>
{{ legend }}
</v-label>
<div class="form-input__wrapper">
<input
:id="$attrs.id || uid"
ref="checkboxRef"
type="checkbox"
v-bind="$attrs"
v-model="inputVal"
@input="onInput"
/>
<label :for="$attrs.id || uid">{{ label }}</label>
</div>
</div>
</template>
<script lang="ts" src="./Checkbox.ts" />
And here is the TypeScript code for my component:
export default defineComponent({
props: {
legend: {
type: String,
default: ''
},
legendSuffix: {
type: String,
default: ''
},
helperText: { type: String, default: '' },
label: { type: String, default: '' },
modelValue: {
type: [String, Number],
default: ''
}
},
emits: ['error', 'input-event', 'mounted'],
setup(props, { emit }) {
const checkboxRef = ref();
const inputVal = ref();
const uid = ref(uniqueId());
watch(
() => props.modelValue,
() => {
inputVal.value = String(props.modelValue);
},
{ immediate: true }
);
const onInput = (event: CustomEvent): void => {
emit('input-event', event);
};
onMounted(() => emit('mounted', unref(checkboxRef)));
return {
checkboxRef,
inputVal,
uid,
onInput
};
}
});
When I include the component like this, the ID property gets added to both the container and the checkbox input:
<v-checkbox
id="test"
:label="test"
/>
I am looking for a solution to prevent these attributes from being duplicated on the container and the input, as having the ID used twice is causing issues.