Hey guys I have the following problem: I want to uncheck the custom checkbox components after I submit the form. I set the v-model to an empty object after submitting (account.value = {}) but the box still stays checked even though the value is empty.
Child Checkbox.vue:
<template>
<div class="checkboxContainer">
<label :for="id"></label>
<input
:id="id"
type="checkbox"
@change="$emit('update:modelValue', $event.target.checked)"
/>
</div>
</template>
<script setup>
import { defineProps } from 'vue'
defineProps({
text: {
default: '',
type: String
},
id: {
default: '',
type: String
}
})
</script>
Parent.vue:
<template>
<form @submit.prevent>
<div class="formWrapper">
<Checkbox
id="changeEmail"
v-model="account.changeEmail"
text="Can Change Email: "
/>
<Checkbox
id="changeUser"
v-model="account.changeUser"
text="Can Change User: "
/>
<button type="submit" @click="createAccount()">Create</button>
</div>
</form>
</template>
<script setup>
import { ref } from 'vue'
import Checkbox from '@/components/helpers/Checkbox.vue'
import axios from 'axios'
const account = ref({})
const createAccount = () => {
axios
.post('/api/account-management/accounts', {
can_change_own_email: account.value.changeEmail,
can_change_own_user: account.value.changeUser
})
.then(() => {
account.value = {}
})
}
</script>
Aucun commentaire:
Enregistrer un commentaire