Open
Description
Package version
Adonis Core Version: 6.14.1, vineJS version: 2.1.0
Describe the bug
Using Adonisjs with inertia + vue(SSR)
// router.ts
router.post('/upload', async ({ request, response }) => {
const data = await request.validateUsing(
vine.compile(
vine.object({
images: vine.array(vine.object({ file: vine.file({ size: '2mb' }), title: vine.string() })),
})
)
)
return response.json(data)
})
//home.vue
<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3'
const getError = (error: any, key: string) => {
return error?.[key]?.join(',')
}
const form = useForm<{
images: { file: File | undefined; title: string }[]
}>({
images: [{ file: undefined, title: '' }],
})
</script>
<template>
<Head>
<title>Home</title>
</Head>
<h1>Form</h1>
<div>
<form
@submit.prevent="form.post('/upload')"
style="display: flex; flex-direction: column; gap: 1rem; padding: 3rem"
>
<template v-for="(_, index) in form.images" :key="index">
<input type="text" placeholder="Title" v-model="form.images[index].title" />
<span>{{ getError(form.errors, `images.${index}.title`) }}</span>
<input
type="file"
@input="form.images[index].file = ($event.target as HTMLInputElement)?.files?.[0]"
/>
<span>{{ getError(form.errors, `images.${index}.file`) }}</span>
</template>
<button type="button" @click="form.images.push({ file: undefined, title: '' })">
Add image
</button>
<button type="submit" :disabled="form.processing">Submit</button>
</form>
</div>
</template>
`
//Respone
"props": {
"errors": {
"images.0.title": [
"The title field must be defined"
],
"images.1.title": [
"The title field must be defined"
],
"images.2.title": [
"The title field must be defined"
]
}
},Reproduction repo
No response