如何将以下代码转换为vue js代码？

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

This is my code. I need to pass latitude and longitude as an ajax request to the server side to get values.. By using this code I am able to do so.

My vue js code is

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

But when I use vue js code I am not able to send ajax request? Can any body please solve my issue Can someone please help me to solve this issue?

Answer 1

The vue way of working with async request for your problem is shown below:

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

But thing to remember, above feature is available in vue-resource package. I suggest you go through this very nice tutorial in @laracasts website: https://laracasts.com/series/learning-vue-step-by-step/episodes/11

Now I hope you'll have no further issues in async request in vue. And the conversion of your code in vue js is here in jsfiddle: https://jsfiddle.net/jcuytpx2/ Happy Coding :)

 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.... this.$http.post('post/filter', filter).then(response => { this.vector = response.data }).catch(error => { // TODO: Handle error here }) *****/ }).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> Country: {{ address.country }}<br> State: {{ address.state }}<br> City: {{ address.city }}<br> Address: {{ address.address }} </strong> <hr> <button @click="search_category"> Search </button> </div>