Wrapping form checkbox with a component and having v-model be passed through

[mitar]

I am trying to wrap form checkbox element into a simple component (primarily to style it with TailwindCSS) and I want that all default behavior is passed through. But there seems to be a lot of it:

• true-value, false-value Vue-specific attributes
• array or boolean values

Currently I am using a writable computed ref to make a proxy between my component's modelValue prop and event emitter. But I am trying to define the component in TypeScript so I am not sure about types I should set. For example, if true-value is set to non-string value, then also modelValue should be non-string? Similar also type of modelValue prop depends if value is set or not on the checkbox input element.

Is there some simpler way to pass through v-model and other specific attributes and get types working out correctly? Why is this not done automatically like the rest of attributes fallthrough?

Are there some other special behavior I am missing? Do I have to handle checkbox array-support in some special way or is it enough if I just pass values back and forth?

I know of useVModel, but again, types seems simplistic there (just string).

[mitar]

I used generic type to get some approximation here and allow non-string values for checkboxes:

<script setup lang="ts" generic="T">
import { computed } from "vue"

const props = withDefaults(
  defineProps<{
    modelValue?: T
  }>(),
  {
    modelValue: undefined,
  },
)

const $emit = defineEmits<{
  "update:modelValue": [value: T]
}>()

const v = computed({
  get() {
    // We use ! operator here to satisfy type constraints and assert that modelValue cannot be undefined,
    // but in fact modelValue can be undefined, but that is handled correctly by Vue's v-model on <input>.
    return props.modelValue!
  },
  set(value: T) {
    $emit("update:modelValue", value)
  },
})
</script>

<template>
  <input
    v-model="v"
    type="checkbox"
    class="my nice class list"
  />
</template>

But I do not like the ! in props.ModelValue! there.

[mitar]

Ah, useVModel does the same and uses ! there.

[ghost]

I do the same thing! 😌