Page is reloaded after form is submitted

[SergkeiM]

Hi,

I have a login page:

<template>
    <form @keyup.enter="login" @submit.prevent method="POST">
        <v-text-field
            v-model="form.email"
            label="Email"
            :error-messages="form.errors.email"
        ></v-text-field>
        <v-text-field
            v-model="form.password"
            label="Password"
            type="password"
            :error-messages="form.errors.password"
        ></v-text-field>
        <v-btn :loading="form.processing" @click="login">Log in</v-btn>
    </form>
</template>
<script>
    import layout from '@views/Layouts/Auth'
    export default {
        layout,
        data(){
            return {
                form: this.$inertia.form({
                    email: '',
                    password: ''
                })
            }
        },
        methods: {
            login(){

                this.form.clearErrors()

                this.form.post(this.route('login'), {
                    onFinish: () => this.form.reset('password')
                })
            }
        }
    }
</script>

After a button is clicked the form is submitted via XHR and immediately reloads. I can see the response with error messages, but nothing is displayed on the page, and the state is not preserved.

{
   "component":"Login",
   "props":{
      "errors":{
         "email":"The email field is required.",
         "password":"The password field is required."
      },
      "flash":{
         "message":null,
         "type":null
      }
   },
   "url":"\/login",
   "version":"fe52c1956957b6c1fdb2d8cb9f3a127f"
}

Laravel version: 6

The weird thing is that I have exactly the same code on Laravel 9 and all works fine there.

[alitokmakci]

can you try this:

<form @keyup.enter="login" @submit.prevent="login"> 
        <v-text-field
            v-model="form.email"
            label="Email"
            :error-messages="form.errors.email"
        ></v-text-field>
        <v-text-field
            v-model="form.password"
            label="Password"
            type="password"
            :error-messages="form.errors.password"
        ></v-text-field>
        <v-btn :loading="form.processing" type="submit">Log in</v-btn>
</form>

[crnkovic]

@Froxz has this been resolved and/or is it no longer needed? Please close the issue if so to help maintainers.