rapid dock
So I am having problem to update I can delete and add bt when i click on edit and try to change image and then update it's keep showing me the name field error of name is required bt without changing image name is updated
<form @submit.prevent="update" class="p-4 border rounded-md shadow-sm bg-white dark:bg-gray-800">
<div>
<div class="mb-4">
<label for="name" class="text-lg font-semibold text-indigo-600 dark:text-indigo-300">Name</label>
<input v-model="form.name" type="text" class="w-full border border-gray-200 dark:border-gray-700 p-2 rounded-md">
<div v-if="form.errors.name" class="text-red-500">{{ form.errors.name }}</div>
</div>
<div class="mb-4">
<label for="image" class="text-lg font-semibold text-indigo-600 dark:text-indigo-300">Image</label>
<input type="file" id="image" @change="onFileChange" ref="imageInput" class="w-full border border-gray-200 dark:border-gray-700 p-2 rounded-md">
<div v-if="form.errors.image" class="text-red-500">{{ form.errors.image }}</div>
<div v-if="form.image">
<p class="mt-2 text-indigo-600 dark:text-indigo-300">Current Image: {{ form.image.name }}</p>
</div>
</div>
</div>
<div>
<button type="submit" class="btn-primary">Update</button>
</div>
</form>
</template>
<script setup>
import { useForm } from '@inertiajs/vue3';
import { usePage } from '@inertiajs/vue3';
const { props } = usePage();
const form = useForm({
name: props.complexion.name,
color: props.complexion.color,
image: props.complexion.image,
});
const onFileChange = (e) => {
form.image = e.target.files[0];
};
const update = () => {
const formData = new FormData();
formData.append('name', form.name);
formData.append('color', form.color);
if (form.image) {
formData.append('image', form.image);
}
form.put(`/complexions/${props.complexion.id}`, formData, {
preserveScroll: true,
});
};
</script>
twin crow
empty sequoia