v-submit
Handle form submissions with automatic preventDefault.
Basic Usage
Attach to a form to call a server method on submit. Automatically prevents the default browser submission.
<form v-submit="'save'">
<input v-model="name" type="text">
<input v-model="email" type="email">
<button type="submit">Save</button>
</form>
<!-- With parameters -->
<form v-submit="['update', [userId]]">
...
</form>v-submit vs @submit
v-submit is a shorthand for the common pattern of preventing default and calling a method.
v-submit (recommended)
<form v-submit="'save'">
...
</form>
@submit.prevent equivalent
<form @submit.prevent="livue.call('save')">
...
</form>Full Example
ContactForm.php
use LiVue\Attributes\Validate;
#[Validate('required|min:3')]
public string $name = '';
#[Validate('required|email')]
public string $email = '';
public function submit()
{
$this->validate();
Contact::create([
'name' => $this->name,
'email' => $this->email,
]);
$this->redirect('/thank-you');
}
contact-form.blade.php
<form v-submit="'submit'">
<div>
<input v-model="name">
<span v-if="livue.errors.name"
class="text-red-500">
{{ livue.errors.name }}
</span>
</div>
<div>
<input v-model="email">
<span v-if="livue.errors.email"
class="text-red-500">
{{ livue.errors.email }}
</span>
</div>
<button type="submit">
Send
</button>
</form>