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

Posted 2023-02-22

【中文标题】如何将以下代码转换为 vue js 代码？

【英文标题】：How can I convert following code to a vue js code?

【发布时间】：2018-04-27 02:55:53

【问题描述】：

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

这是我的代码。我需要将纬度和经度作为 ajax 请求传递给服务器端以获取值。通过使用此代码，我能够做到这一点。

我的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 请求？任何人都可以解决我的问题有人可以帮我解决这个问题吗？

【问题讨论】：

你能澄清一下“我无法发送 ajax 请求”是什么意思吗？你有错误吗？错误是什么？

【参考方案1】：

vue 针对您的问题处理异步请求的方式如下所示：

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

但要记住，以上功能在vue-resource 包中可用。我建议你通过@laracasts 网站上的this 非常好的教程：https://laracasts.com/series/learning-vue-step-by-step/episodes/11

现在我希望您在 vue 中的异步请求中不会再遇到问题。而你在 vue js 中的代码转换在 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>

【讨论】：

如何在不搜索的情况下自动检测

你想自动检测什么？