0

我刚刚开始学习 laravel+vue。我能够按照这个 yt 的教程进行操作：https ://www.youtube.com/watch?v=JZDmBWRPWlw 。尽管它看起来已经过时，但我仍然能够按照他的步骤进行操作。我正在使用 laravel-mix 6.0.6 和 vue 2.6.12。

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

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

但不知何故，它没有显示完整的错误消息。现在它只显示句子的第一个字母。哈哈。示例错误消息是：电子邮件字段是必需的，它只会显示字母"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 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 'then'”

在发现

---> 在资源/js/Pages/Users/Create.vue

4

1 回答 1

0

您的错误调用可能只收到第一个字母，因为[0]. 尝试更改为：

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

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

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

那只会打印T。这大概就是问题所在。

于 2021-06-05T16:45:44.493 回答