mirror of
https://github.com/ThisIsBenny/wishlist-app.git
synced 2025-06-07 05:57:41 +00:00
fix checkbox input
Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
This commit is contained in:
parent
7db5436f7a
commit
5c5a50b8fe
1 changed files with 5 additions and 3 deletions
|
@ -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>
|
||||||
|
|
Loading…
Add table
Reference in a new issue