用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));