如何使用输入使用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

如果你想用onenter进行验证（这是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); 
     }

本例使用_.debounce这是一个lodash功能，但你可以很容易地通过setTimeout和cancelTimeout写类似的东西自己（lodash仅仅是一个方便）。目的是不触发每个键盘上的验证，而是将其散布一点。

来源

2017-07-27 08:12:29 apokryfos

嗨。除此之外还有其他方法吗？所以我仍然可以使用我创建的'submitForm'方法？ – Jonjie

您可以使用相同的方法，但如果它通过则不会调用'.submit'。检查更新。 – apokryfos

这不工作兄弟。发生什么事？ – Jonjie

如何使用输入使用VueJs和Laravel 5

回答

相关问题