This release includes a new form helper, inspired by the form helper included in Jetstream. Here's how to use it:
<template>
<form @submit.prevent="form.post('/login')">
<!-- email -->
<input type="text" v-model="form.email" />
<div v-if="form.errors.email">{{ form.errors.email }}</div>
<!-- password -->
<input type="password" v-model="form.password" />
<div v-if="form.errors.password">{{ form.errors.password }}</div>
<!-- remember me -->
<input type="checkbox" v-model="form.remember" /> Remember Me
<!-- submit -->
<button type="submit" :disabled="form.processing">Login</button>
</form>
</template>
<script>
export default {
data() {
return {
form: this.$inertia.form({
email: null,
password: null,
remember: false,
}),
}
},
}
</script>
Alternatively, you can use the form helper with the new Vue 3 composition API:
import { useForm } from '@inertiajs/inertia-vue3'
export default {
setup() {
const form = useForm({
email: null,
password: null,
remember: false,
})
return { form }
},
}
It also comes with a form.reset()
helper for resetting the form back to its original state. Or, if you want to only reset specific fields, you can call form.reset('field', 'anotherfield')
.
Also, in the event that you're uploading files, the current progress event is available at form.progress
, which makes it really easy to show upload progress in your views:
<progress :value="form.progress.percentage" max="100">{{ form.progress.percentage }}%</progress>
Also, if you need to modify the data before it's sent to the server, you can do this via the transform()
function:
this.form
.transform((data) => ({
...data,
remember: data.remember ? 'on' : '',
}))
.post('/login')
This release adds a new optional resolveErrors
setting. You can read more about this in the corresponding Inertia release.
When upgrading to this release, be sure to also upgrade @inertiajs/inertia
to v0.8.0
.