fix checkbox input

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
This commit is contained in:
Benny Samir Hierl 2022-02-13 10:25:13 +01:00
parent 7db5436f7a
commit 5c5a50b8fe

View file

@ -1,8 +1,8 @@
<template> <template>
<div class="relative mb-8"> <div class="relative mb-8">
<label class="mb-1 block w-full" :for="name">{{ label }}</label> <label class="mb-1 block w-full" :for="name">{{ label }}</label>
<div @click="handleChange(checked)"> <div @click="handleChange(!checked)">
<IconToggleOn v-if="!checked" class="h-12 w-12 fill-emerald-700" /> <IconToggleOn v-if="checked" class="h-12 w-12 fill-emerald-700" />
<IconToggleOff <IconToggleOff
v-else v-else
class="h-12 w-12 cursor-pointer fill-stone-500 dark:fill-current" class="h-12 w-12 cursor-pointer fill-stone-500 dark:fill-current"
@ -18,6 +18,7 @@ import { IconToggleOn, IconToggleOff } from '@/components/icons'
const props = defineProps({ const props = defineProps({
value: { value: {
type: Boolean, type: Boolean,
default: false,
}, },
name: { name: {
type: String, type: String,
@ -30,7 +31,8 @@ const props = defineProps({
}) })
const { checked, handleChange } = useField(props.name, undefined, { const { checked, handleChange } = useField(props.name, undefined, {
type: 'checkbox', type: 'checkbox',
checkedValue: props.value,
initialValue: props.value, initialValue: props.value,
checkedValue: true,
uncheckedValue: false,
}) })
</script> </script>