VueJsとLaravel 5を使用して入力する方法

私はthis tutorialに続き、それは完璧に正常に動作しました。しかし、私がしたいのは、submitのボタンを使って検証を行うか、検証を実行しないということです。私が入力している間は、フォームを検証しています。下記の私のコードを参照するか、上記のリンクをご覧ください。VueJsとLaravel 5を使用して入力する方法

コード：

経路

<?php 

Route::get('/', function() { 
    return view('welcome'); 
}); 

Route::get('/article/create', '[email protected]'); 
Route::post('/article', '[email protected]');

ArticleControllerは

<?php 
namespace App\Http\Controllers; 

use Illuminate\Http\Request; 
use App\Http\Requests; 
use App\Http\Controllers\Controller; 

class ArticleController extends Controller 
{ 
    public function showArticleCreationForm(){ 
     return view('article.create'); 
    } 

    public function publish(Request $request){ 
     $this->validate($request, [ 
      'title' => 'required|min:3', 
      'body' => 'required|min:10' 
     ]); 
     if ($request->ajax()) return; 

     return 'publish'; 
    } 
}

create.blade.php

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Create Article</title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> 
    <style> 
     .body { 
      height: 200px !important; 
     } 

     .error { 
      color: darkred; 
      margin-top: 5px; 
      display: block; 
     } 
    </style> 
</head> 
<body id="app"> 
    <form @submit.prevent="submitForm" class="col-md-4 col-md-offset-4" action="{{ URL::to('/') }}/article" method="post"> 
     <h1>Create New Article</h1> 
     <hr> 

     {!! csrf_field() !!} 

     <div class="form-group"> 
      <input class="form-control title" type="text" name="title" placeholder="Title" v-model="formInputs.title"> 
      <span v-if="formErrors['title']" class="error">@{{ formErrors['title'] }}</span> 
     </div> 

     <div class="form-group"> 
      <textarea class="form-control body" name="body" placeholder="Content" v-model="formInputs.body"></textarea> 
      <span v-if="formErrors['body']" class="error">@{{ formErrors['body'] }}</span> 
     </div> 

     <button class="btn btn-primary" type="submit">Publish</button> 
    </form> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.6.1/vue-resource.min.js"></script> 
<script> 
    new Vue({ 
     el: '#app', 

     data: { 
      formInputs: {}, 
      formErrors: {} 
     }, 

     methods: { 
      submitForm: function(e){ 
       var form = e.target; 
       var action = form.action; 
       var csrfToken = form.querySelector('input[name="_token"]').value; 

       this.$http.post(action, this.formInputs, { 
        headers: { 
         'X-CSRF-TOKEN': csrfToken 
        } 
       }) 
       .then(function() { 
         form.submit(); 
       }) 
       .catch(function (data, status, request) { 
        var errors = data.data; 
        this.formErrors = errors; 
       }); 
      } 
     } 
    }); 
</script> 
</body> 
</html>

出典

2017-07-27 Jonjie

オンエアで検証（ajax）したい場合は、デバウンスを使って検証することもできます。それでいいよ。記事の作成を検証から切り離し、検証のための追加ルートを作成するだけです。 – dfsq

@ dfsqこんにちは。答えを明示的に提示できますか？ – Jonjie

あなたがあなたの入力に@keyup（またはv-on:keyup）イベントリスナーを追加し、それは例えばトリガーだ時に検証する必要があります入力中に検証したい場合：

<input class="form-control title" type="text" name="title" placeholder="Title" v-model="formInputs.title" v-on:keyup="validate">

そして、あなたのイベントリスナー：

methods: { 
     validate: function (e) { 
      //e.target would have the target input which is being changed 

      _.debounce(function() { 
        var input = e.target; 
        var form = input.form; 
        var action = form.action; 
        var csrfToken = form.querySelector('input[name="_token"]').value; 

        this.$http.post(action, this.formInputs, { 
        headers: { 
         'X-CSRF-TOKEN': csrfToken 
        } 
       }) 
       .then(function() { 
         // Don't submit 
       }) 
       .catch(function (data, status, request) { 
        var errors = data.data; 
        this.formErrors = errors; 
       }); 

      }.bind(this), 500); 
     }

この例ではlodash機能である_.debounceを使用していますが、簡単に（lodashは単なる便利です）setTimeoutとcancelTimeoutを経由して似たような自分自身を書くことができます。目的は、すべてのキーアップで検証をトリガーするのではなく、ちょっとだけ広げることです。

出典

2017-07-27 08:12:29 apokryfos

こんにちは。これ以外の方法はありますか？私はまだ作成した 'submitForm'メソッドを使用できますか？ – Jonjie

同じメソッドを使うことができますが、渡された場合は '.submit'を呼び出さないでください。アップデートを確認してください。 – apokryfos

それは仲間を働かせていません。何が起きましたか？ – Jonjie

VueJsとLaravel 5を使用して入力する方法

答えて

関連する問題