Question

 <script type="text/javascript"> 
    navigator.geolocation.getCurrentPosition(success, error); 

    function success(position) { 

     var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en'; 

     $.getJSON(GEOCODING).done(function(location) { 
      $('#country').html(location.results[0].address_components[5].long_name); 
      $('#state').html(location.results[0].address_components[4].long_name); 
      $('#city').html(location.results[0].address_components[2].long_name); 
      $('#address').html(location.results[0].formatted_address); 
      $('#latitude').html(position.coords.latitude); 
      $('#longitude').html(position.coords.longitude); 
     }) 
     $.ajax({ 
      url: 'post/filter/', 
      data: { 
      lat: position.coords.latitude, 
      lon: position.coords.longitude, 
      }, 
      type: "POST", 
      dataType: 'json', 

     }); 
    } 

    function error(err) { 
     console.log(err) 
    } 

これは私のコードです。私は値を取得するためにサーバー側にアヤックスの要求として緯度と経度を渡す必要があります..私はそうすることができますこのコードを使用して。

マイVUEのJSコードは

<div id="categorie"> 
    <div>{{vector.name}}</div> 
</div> 
<script> 
categorie = new Vue({ 
    el: '#categorie', 
    data: { 
     vector: {}, 
    }, 
methods: { 

      search_category: function success(position) { 
       navigator.geolocation.getCurrentPosition(success, error); 
      var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en'; 

      $.getJSON(GEOCODING).done(function(location) { 
       $('#country').html(location.results[0].address_components[5].long_name); 
       $('#state').html(location.results[0].address_components[4].long_name); 
       $('#city').html(location.results[0].address_components[2].long_name); 
       $('#address').html(location.results[0].formatted_address); 
       $('#latitude').html(position.coords.latitude); 
       $('#longitude').html(position.coords.longitude); 
      }) 
      var filter = {}; 
      var self=this; 
      filter['category'] = position.coords.latitude; 
      filter['subcategory'] = position.coords.longitude; 
      $.ajax({ 
       "url": "post/filter", 
       data: filter, 
       dataType: "JSON", 
       type: "POST", 
       success: function(e) { 
        self.vector = e.data; 
       console.log(e); 
       }, 

      }); 
      } 
     } 

}) 
</script> 

あるしかし、私はVUEのJSコードを使用するとき、私は、Ajaxリクエストを送信することはできませんよ？どのような体は私の問題を解決してください誰かがこの問題を解決するために私を助けてくれる？

Answer 1

あなたの問題のための非同期リクエストを扱うのVUEの方法を以下に示します。

this.$http.get(GEOCODING).then(response=> { 
    // here your data is in response 
}).catch(error => { 
    // TODO: handle your error here... 
}) 

しかし、事は覚えておくことは、機能上のvue-resourceパッケージで提供されています。 https://laracasts.com/series/learning-vue-step-by-step/episodes/11

ここで、vueの非同期要求に問題がないことを願っています。そしてVUEのjsの中にあなたのコードの変換はjsfiddleにここにある：コーディング:)ハッピーhttps://jsfiddle.net/jcuytpx2/

category = new Vue({ 
 
    el: '#category', 
 
    data:() => ({ 
 
     vector: {}, 
 
     address: { 
 
      country: '', 
 
      state: '', 
 
      city: '', 
 
      address: '' 
 
     }, 
 
    }), 
 

 
    methods: { 
 
     search_category(position) { 
 
       navigator.geolocation.getCurrentPosition(position => { 
 
        var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en'; 
 
        this.google_response(GEOCODING).then(response => { 
 
         this.address.country = response.results[0].address_components[5].long_name 
 
         this.address.state = response.results[0].address_components[4].long_name 
 
         this.address.city = response.results[0].address_components[2].long_name 
 
         this.address.address = response.results[0].formatted_address 
 

 
         let filter = {} 
 
         filter.category = response.coords.latitude 
 
         filter.subcategory = response.coords.longitude 
 

 
         /**** implement your methods here.... 
 
\t \t \t \t this.$http.post('post/filter', filter).then(response => { 
 
\t \t \t \t  \t \t this.vector = response.data 
 
\t \t \t \t }).catch(error => { 
 
\t \t \t \t \t \t // TODO: Handle error here 
 
\t \t \t \t }) 
 
\t \t \t \t *****/ 
 
        }).catch(error => { 
 
         // TODO: Handle error here 
 
        }) 
 
       }) 
 
      }, 
 

 
      google_response(GEOCODING) { 
 
       return new Promise((resolve, reject) => { 
 
        this.$http.get(GEOCODING).then(response => { 
 
         resolve(JSON.parse(response.bodyText)) 
 
        }).catch(error => { 
 
         reject(error) 
 
        }) 
 
       }) 
 
      } 
 
    } 
 

 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script> 
 
<script src="https://unpkg.com/vue"></script> 
 

 
<div id="category"> 
 
    <div>{{vector.name}}</div> 
 
    <hr> 
 
    <strong> 
 
\t \t Country: {{ address.country }}<br> 
 
\t \t State: {{ address.state }}<br> 
 
\t \t City: {{ address.city }}<br> 
 
\t \t Address: {{ address.address }} 
 
\t </strong> 
 
    <hr> 
 
    <button @click="search_category"> 
 
     Search 
 
    </button> 
 
</div>