Gửi biểu mẫu trong Vue.js với ajax

Question

Tôi thực sự bị mắc kẹt về cách thức tôi sẽ làm việc với việc gửi biểu mẫu tạo yêu cầu ajax bằng Vue.js và vue-resource sau đó sử dụng phản hồi để điền vào div.

Tôi làm điều này từ dự án để dự án với js/jQuery như thế này:

xem trong lưỡi

{!! 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']); 
     } 
    ); 
}); 

Những gì tôi đã đã thực hiện/đã thử cho đến nay trong Vue.js:

xem trong lưỡi

{!! 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); 
        } 
       ); 
      } 
     } 
    }); 

Tôi tự hỏi nếu nó có thể sử dụng các thành phần khi đối phó với những phản ứng để sản xuất các dữ liệu đáp ứng với một div?

Chỉ cần tóm tắt tất cả mọi thứ:

1. Làm thế nào để tôi gửi một hình thức sử dụng js vue và vue tài nguyên thay vì cách jQuery thông thường của tôi?
2. Sử dụng phản hồi từ ajax, làm cách nào tôi có thể xuất dữ liệu vào div tốt nhất là sử dụng các thành phần?

Bất kỳ trợ giúp nào về điều này sẽ được đánh giá cao nhất, cảm ơn.

Answer 1

1. Thêm v-model="id" trên đầu vào văn bản của bạn

2. sau đó thêm nó vào đối tượng dữ liệu của bạn

   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. Đó có lẽ tốt hơn để loại bỏ v-on="click: search" và thêm v-on="submit: search" trên bạn tạo thẻ.

4. Bạn nên thêm method="GET" vào biểu mẫu html của mình.
5. Đảm bảo bạn có #someId trong mã html của mình.

Answer 2

Để có được giá trị từ đầu vào bạn phải sử dụng v-mô hình thị

1.Blade Xem

<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> 

Nếu bạn muốn truyền dữ liệu cho phần việc sử dụng 'đạo cụ' nhìn thấy tài liệu cho biết thêm

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

Nếu bạn muốn sử dụng laravel và vuejs với nhau, sau đó kiểm tra

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

Tôi hy vọng điều này hữu ích cho bạn!

Answer 3

tôi đã sử dụng phương pháp này và làm việc như một nét duyên dáng:

event.preventDefault(); 

let formData = new FormData(event.target); 

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