用ajax在Vue.js中提交表單

Question

我真的被困在如何使用提交表單的方式使用Vue.js和vue-resource發出ajax請求，然後使用響應來填充div。

我做這個項目從與JS項目/ jQuery的是這樣的：

鑑於刀片

{!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inline']) !!} 
    <div class="form-group"> 
     <input type="text" name="id" class="form-control" placeholder="id" required="required"> 
    </div> 
    <button type="submit" class="btn btn-default">Search</button> 
{!! Form::close() !!} 

JS/jQuery的

var $searchForm = $('#searchForm'); 
var $searchResult = $('#searchResult'); 

$searchForm.submit(function(e) { 
    e.preventDefault() ; 

    $.get(
     $searchForm.attr('action'), 
     $searchForm.serialize(), 
     function(data) { 
      $searchResult.html(data['status']); 
     } 
    ); 
}); 

我有什麼完成/嘗試迄今在Vue.js：

鑑於刀片

{!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inline']) !!} 
    <div class="form-group"> 
     <input type="text" name="id" class="form-control" placeholder="id" required="required"> 
    </div> 
    <button type="submit" class="btn btn-default" v-on="click: search">Search</button> 
{!! Form::close() !!} 

VUE/JS

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value'); 

    new Vue({ 
     el: '#someId', 

     data: { 

     }, 

     methods: { 
      search: function(e) { 
       e.preventDefault(); 

       var req = this.$http.get(
        // ???, // url 
        // ???, // data 
        function (data, status, request) { 
         console.log(data); 
        } 
       ); 
      } 
     } 
    }); 

我不知道是否有可能使用組件的響應輸出響應數據處理到一個div什麼時候？

只是概括一切：

1. 如何提交使用VUE JS和VUE資源，而不是我平時的jQuery的方式形成的？
2. 使用來自ajax的響應，我怎樣才能最好使用組件輸出數據到div？

任何幫助，將不勝感激，謝謝。

Answer 1

1. 你的文本輸入添加v-model="id"

2. 然後將其添加到您的數據對象

   new Vue({ 
       el: '#someId', 
   
       data: { 
        id: '' 
       }, 
   
       methods: { 
        search: function(e) { 
         e.preventDefault(); 
   
         var req = this.$http.get(
          '/api/search?id=' + this.id, 
          function (data, status, request) { 
           console.log(data); 
          } 
         ); 
        } 
       } 
   }); 
   

3. 這也許較好的去除v-on="click: search"，並添加v-on="submit: search"你形成標籤。

4. 您應該在您的html表單上添加method="GET"。
5. 確保您的HTML代碼中有#someId。

Answer 2

爲了得到輸入，你必須使用V型指令

1的值。刀片查看

<div id="app"> 
<form v-on="submit: search"> 
    <div class="form-group"> 
     <input type="text" v-model="id" class="form-control" placeholder="id" required="required"> 
    </div> 

    <input type="submit" class="btn btn-default" value="Search"> 
</form> 
</div> 

<script type="text/javascript"> 

// get route url with blade 
var url = "{{route('formRoute')}}"; 

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value'); 


var app = new Vue({ 
    el: '#app', 
    data: { 
     id: '', 
     response: null 
    }, 
    methods: { 
     search: function(event) { 
      event.preventDefault(); 

      var payload = {id: this.id}; 

      // send get request 
      this.$http.get(url, payload, function (data, status, request) { 

      // set data on vm 
      this.response = data; 

      }).error(function (data, status, request) { 
       // handle error 
      }); 
     } 
    } 
}); 
</script> 

如果你想將數據傳遞到組件使用「道具」看到文檔的更多信息

http://vuejs.org/guide/components.html#Passing_Data_with_Props

如果你想使用laravel和vuejs在一起，然後結賬

https://laracasts.com/series/learning-vuejs

我希望這對你有幫助！

Answer 3

我用這種方法和工作就像一個魅力：

event.preventDefault(); 

let formData = new FormData(event.target); 

formData.forEach((key, value) => console.log(value, key));