laravel/precognition

form.validating always false

makroxyz opened this issue · 3 comments

Laravel Precognition Plugin Version

0.5.1

Laravel Version

10.22

Plugin

Vue w/ Inertia

Description

I can't see form.validating change while validating

Steps To Reproduce

<input v-model="form.first_name" @change="form.validate('first_name')" />
 --- {{ form.validating }} ---
const form = useForm('post', '/my-route', {
 first_name: null
})

Hey there,

I'm not able to reproduce this issue. If I create a fresh Laravel Breeze application:

composer create-project laravel/laravel preconition-test
cd preconition-test
composer install laravel/breeze
php artisan breeze:install vue
npm install laravel-precognition-vue

Then paste the following in the Welcome.vue file...

<script setup>
import { useForm } from 'laravel-precognition-vue';

const form = useForm('post', '/users', {
    name: '',
    email: '',
});

const submit = () => form.submit();
</script>

<template>
    <form @submit.prevent="submit">
        <label for="name">Name</label>
        <input
            id="name"
            v-model="form.name"
            @change="form.validate('name')"
        />
        <div v-if="form.invalid('name')">
            {{ form.errors.name }}
        </div>

        <label for="email">Email</label>
        <input
            id="email"
            type="email"
            v-model="form.email"
            @change="form.validate('email')"
        />
        <div v-if="form.invalid('email')">
            {{ form.errors.email }}
        </div>

        <div :class="form.validating ? 'font-bold text-green-500' : ''">
            Validating: {{ form.validating }}
        </div>

        <button :disabled="form.processing">
            Create User
        </button>
    </form>
</template>

Then build and serve the app...

npm run build
php artisan serve

I see the following. Note: I've added a 3 second sleep to my public/index.php file to make sure we see the change...

Screen.Recording.2023-09-13.at.1.12.17.pm.mov

If this is still an issue, we made need a repository that reproduces the issue in isolation.

@timacdonald the issue is on laravel-precognition-vue-inertia

@makroxyz thanks for letting me know. Missed that sorry.

Fixed here: #49

Thanks for reporting this!