ajax

Question

साथ Vue.js में प्रपत्र को जमा मैं वास्तव में कैसे मैं एक रूप है कि Vue.js और Vue-संसाधन का उपयोग कर तो प्रतिक्रिया का उपयोग कर एक div को भरने के लिए एक ajax अनुरोध करता है प्रस्तुत करने के साथ काम करेगा पर अटक कर रहा हूँ।

मैं इस परियोजना से ऐसा करने 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. सुनिश्चित करें कि आपके पास अपने एचटीएमएल कोड में #someId है।

Answer 2

आदेश इनपुट से आप वी मॉडल निर्देशक

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