2017-06-06 14 views
0

私が持っているこのような形式のcreate.vue:ハンドリングフォーム検証エラー5.4 + vueJS

<template> 
    <div> 
     <div v-if="message" class="alert alert-success"> 
      {{ message }} 
     </div> 

     <form @submit.prevent="store" action="/user" method="post"> 
      <div :class="['form-group', errors.name ? 'has-error' : '']"> 
      <!--<div class="form-group">--> 
      <label>Full name</label> 
       <input v-model="state.name" type="text" class="form-control"> 
       <span v-if="errors.name" class="label label-danger">{{ errors.name[0] }}</span> 
       <!--<span class="label label-danger">{{ errors(errors.name) }}</span>--> 
      </div> 

      <div :class="['form-group', errors.email ? 'has-error' : '']"> 
      <!--<div class="form-group">--> 
       <label>Email</label> 
       <input v-model="state.email" type="email" class="form-control"> 
       <span v-if="errors.email" class="label label-danger">{{ errors.email[0] }}</span> 
       <!--<span class="label label-danger">{{ errors(errors.email) }}</span>--> 
      </div> 

      <div class="form-group"> 
       <button class="btn btn-primary">Submit</button> 
       <!--<router-link :to="{ name: 'userIndex' }">Back to index</router-link>--> 
      </div> 
     </form> 
    </div> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      errors: [], 
      user: [], 
      state: { 
       name: '', 
       email: '' 
      } 
     } 
    }, 

    methods: { 
     store(e) { 
      axios.post(e.target.action, this.state).then(response => { 
       this.errors = []; 

       this.state = { 
        name: '', 
        email: '' 
       } 

       this.message = 'User has been created.'; 
      }).catch(error => { 
       if (! _.isEmpty(error.response)) { 
        if (error.response.status = 422) { 
         this.errors = error.response.data; 
        } 
       } 
      }); 
     } 
    } 
} 
</script> 

そして、私のコントローラ: UserCOntroller.php

public function store(Request $request) 
    { 
     $this->validate($request, [ 
      'name' => 'required|string|max:50', 
      'email' => 'required|email|unique:users,email', 
     ]); 

     $user = User::create([ 
      'name'  => $request->name, 
      'email' => $request->email, 
      'password' => bcrypt(str_random()), 
     ]); 

     return response()->json($user); 
    } 

私はのようなものを入力するものこれまで存在していた(ユニーク)、私はコンソールの応答でエラーテキストを取得しますが、通常のような形式では表示されません。このようなコンソールでエラーが表示されます:

フォームでの表示方法は? スクリプトで何が問題になっていますか?

助けてくださいか?あなたに前にありがとう..

+0

@Demonyowh、あなたはどういう意味ですか? VUEのタグテンプレート –

答えて

1

こんにちは私は私のローカルであなたのスクリプトを複製しようとしました。私の中で動作します。 catchのオブジェクトエラーをデバッグしようとしますか?サンプル結果を送信してください:)

if (error.response.status = 422) { 
    this.errors = error.response.data; 
    console.log(this.errors);        
} 
+0

以下JSで スクリプトエラーが私が得る応答 {電子メール:[「電子メールは、すでに使われている」]} とステータス 422処理不能エンティティ –

+0

こんにちは親切にこのフィドルを見てください。 https://jsfiddle.net/khenxi/ev8wvg8p/ 'this.errors'に本当に適切な出力が含まれている場合は、 – Kzy