Laravel+vue:错误消息只显示句子的第一个字母

Question

我刚刚开始学习laravel+vue。我能够遵循这个yt的教程：https://www.youtube.com/watch?v=JZDmBWRPWlw.虽然它看起来已经过时了，但我仍然能够跟随他的脚步。我使用的是laravel mix 6.0.6和vue 2.6.12。

使用inspect元素>网络，我可以看到我在数组中抛出了正确的错误消息。

{"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"}

但不知何故，它并没有显示完整的错误消息。现在它只显示句子的第一个字母。LOL。示例错误消息为：电子邮件字段是必填的，它只会显示字母"T">。下面是我的Create.vue。基本上，它只是一个简单验证的用户创建表单。

创建.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>

编辑：

我的控制台上有这个错误

[Vue warn]：v-on处理程序出错："TypeError:无法读取属性未定义的"then"；

在中找到

--->位于resources/js/Pages/Users/Create.vue

Answer 1

由于[0]，您的错误调用可能只得到第一个字母。尝试更改为：

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

字符串也可以作为数组读取。如果你这样做：

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

这将只打印T。这可能就是问题所在。