请教各位大侠：
我laravel中，用Vue实现登录时无刷新返回错误提示，但无错误时，无法直接进入home页（手动F5后可进入home页）。控制台上的错误信息是：
[Vue warn]: Error in render function: "TypeError: errors.phone.join is not a function"(found in <Root>)请各位大侠赐教。谢谢！
app.js代码：
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
Vue.component('form-error', require('./components/FormError.vue'));
const app = new Vue({
el: '#app',
data: {
user: {
phone: '',
password: '',
msgPhone: ''
},
errors: [],
},
methods: {
loginPost() {
var self = this;
axios.post('login', self.user).then(function (response) {
}).catch(function (error) {
//表单提交失败，错误数组通过返回到表单 form submission failed, pass form errors to errors array
self.errors = error.response.data;
});
},
}
});view:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">登录</div>
<div class="panel-body">
<!--页面提交之后阻止刷新-->
<form class="form-horizontal" @submit.prevent="loginPost" method="POST">
{ csrf_field() }
<!--如果phone字段验证失败则添加.has-error-->
<div class="form-group" :class="{'has-error':errors.phone}">
<label for="phone" class="col-md-4 control-label">手机号码：</label>
<div class="col-md-6">
<input type="text" name="phone" class="form-control" v-model="user.phone"
value="{ old('phone') }">
<!--如果验证失败通过FormError组件显示错误信息-->
<form-error v-if="errors.phone" :errors="errors">
@{errors.phone.join(',')}
</form-error>
<input type="hidden" name="msgPhone" class="form-control" v-model="user.msgPhone">
<form-error style="color:red" v-if="errors.msgPhone" :errors="errors">
@{errors.msgPhone.join(',')}
</form-error>
</div>
</div>
<!--如果password字段验证失败则添加.has-error-->
<div class="form-group" :class="{'has-error':errors.password}">
<label for="password" class="col-md-4 control-label">密码：</label>
<div class="col-md-6">
<input type="password" class="form-control"
name="password" v-model="user.password">
<!--如果验证失败通过FormError组件显示错误信息-->
<form-error v-if="errors.password" :errors="errors">
@{errors.password.join(',')}
</form-error>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary btn-block">
获取密码||登录
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsectionLoginController:`
<?php
namespace App\Http\Controllers\Auth;
use App\User;
use Illuminate\Support\Facades\Auth;
use Validator;//验证
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;
class LoginController extends Controller
{
/*
|--------------------------------------------------------------------------
| Login Controller
|--------------------------------------------------------------------------
|
| This controller handles authenticating users for the application and
| redirecting them to your home screen. The controller uses a trait
| to conveniently provide its functionality to your applications.
|
*/
use AuthenticatesUsers;
/**
* Where to redirect users after login.
*
* @var string
*/
protected $redirectTo = '/home';
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest')->except('logout');
}
//重写登录方法
public function login(Request $request)
{
//通过flush方法一次性删除所有Session数据：
//$request->session()->flush();
//1.验证手机
$vp = $this->validate($request, $this->validateLoginPhoneRules(), $this->validateLoginPhoneMessages());
//如果手机验证通过并且session中没有存贮该手机
if (session('phone') != $request->phone) {
//2.生成手机与密码组合
$this->getPassword($request);
// return redirect('login')->withErrors(['password' => '密码已经发送至你的手机，请注意查收！'])->withInput();
};
$phone = trim($request->phone);
$password = trim($request->password);
//3.如果手机验证通过并且session中存贮了该手机
if (session('phone') != $phone || session('password') != $password) {
//为了生成一个提示信息，进行一个假验证
$this->validate($request, ['password' => 'min:12'], ['password.min' => '手机号码和密码不匹配！']);
}
$user = User::where('phone',$phone)->first();
Auth::login($user);
// If the class is using the ThrottlesLogins trait, we can automatically throttle
// the login attempts for this application. We'll key this by the username and
// the IP address of the client making these requests into this application.
if ($this->hasTooManyLoginAttempts($request)) {
$this->fireLockoutEvent($request);
return $this->sendLockoutResponse($request);
}
if ($this->attemptLogin($request)) {
return $this->sendLoginResponse($request);
}
// If the login attempt was unsuccessful we will increment the number of attempts
// to login and redirect the user back to the login form. Of course, when this
// user surpasses their maximum number of attempts they will get locked out.
$this->incrementLoginAttempts($request);
return $this->sendFailedLoginResponse($request);
}
//重写用户名
public function username()
{
return 'phone';
}
//手机规则
protected function validateLoginPhoneRules()
{
return [
'phone' => ['required', 'regex:/^1[34578]\d{9}$/', 'exists:users'],
];
}
//手机验证错误提示信息
public function validateLoginPhoneMessages()
{
return [
'phone.required' => '手机号码不能为空！',
'phone.regex' => '手机号码非法！',
'phone.exists' => '手机号码不存在！',
];
}
//生成密码并发送
public function getPassword($request)
{
$pwd = rand(100000, 999999);
session(['phone' => $request->phone, 'password' => $pwd]);
//为了生成一个提示信息，进行一个假验证
$this->validate($request, ['msgPhone' => 'required'], ['msgPhone.required' => '密码已经发送，请注意查收！' . $pwd]);
}
}users表:
$table->increments('id');
$table->string('name')->comment('姓名');
$table->string('id_number')->unique()->comment('身份证号码');
$table->string('phone')->unique()->comment('手机号码');
$table->string('avatar')->default('/public/img/avatar/default.png')->comment('头像');
$table->string('api_token',64)->comment('api认证');
$table->rememberToken()->comment('记住我');
$table->json('settings')->nullable()->comment('用户资料');
$table->timestamp('deleted_at')->nullable()->comment('软删除');
$table->timestamps();
