Laravel + vue: Error message only showing the first letter of the sentence

Question

I'm just starting to learn laravel+vue. I was able to follow a tutorial from this yt: https://www.youtube.com/watch?v=JZDmBWRPWlw. Though it seems outdated, I was still able to follow his steps. I'm using the laravel-mix 6.0.6 and vue 2.6.12.

Using inspect element>network, I can see that I'm throwing the correct error message in array.

{"component":"Users\/Create","props":{"app":{"name":"Laravel"},"errors":{"name":"The name field is required.","email":"The email field is required."}},"url":"\/users\/create","version":"207fd484b7c2ceeff7800b8c8a11b3b6"}

But somehow it is not displaying the complete error message. Right now it just show the first letter of the sentence. LOL. Sample error message is: The email field is required and it will just display the letter "T". Below is my Create.vue. Basically it is just a user create form with simple validation.

Create.vue

<template>
    <layout>
        <div class="container">
            <div class="col-md-6">
                <div v-if="Object.keys(errors).length > 0" class="alert alert-danger mt-4">
                    {{ errors[Object.keys(errors)[0]][0] }}
                </div>
                <form action="/users" method="POST" class="my-5" @submit.prevent="createUser">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Name" v-model="form.name">
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="text" class="form-control" id="email" placeholder="Email" v-model="form.email">
                    </div>
                    <div class="form-group">
                        <label for="name">Password</label>
                        <input type="password" class="form-control" id="password" placeholder="Password" v-model="form.password">
                    </div>
                    <button type="submit" class="btn btn-primary">Create User</button>
                </form>
            </div>
        </div>
    </layout>
</template>


<script>
import Layout from '../../Shared/Layout'

export default {
    props: ['errors'],
    components: {
        Layout,
    },
    data() {
        return {
            form: {
                name: '',
                email: '',
                password: '',
            }
        }
    },
    methods: {
        createUser() {
            this.$inertia.post('/users', this.form)
                .then(() => {
                    // code
                })
            
        }
    }
}
</script>

Edit:

I have this error on my console

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'then' of undefined"

found in

---> at resources/js/Pages/Users/Create.vue

Answer 1

Your error call is probably getting only the first letter due to [0]. Try to change to:

{{ errors[Object.keys(errors)[0]] }}

Strings can also be read as arrays. If you do this:

$a = "TEST";
echo $a[0];

That would print only T. That is probably the problem.