Dale Nguyen Dale Nguyen - 4 months ago 68
jQuery Question

VueJS doesn't work on mobile

I have a problem with running VueJS on mobile devices. I created a weather prediction app on copepen.io

Here is the link for the project:

http://codepen.io/techcater/pen/xOZmgv

HTML code:

<div class="container-fluid text-center">
<h1>Your Local Weather</h1>
<p>
{{location}}
</p>
<p>
{{temperature}}
<a @click="changeDegree">{{degree}}</a>
</p>
<p>
{{weather | capitalize}}
</p>

<img :src="iconURL" alt="" />
<br>
<a href="https://ca.linkedin.com/in/dalenguyenblogger" target="_blank">by Dale Nguyen</a>
<!-- <pre>{{$data | json}}</pre> -->
</div>


JS code:

new Vue({
el: '.container-fluid',

data: {
location: "",
temperature: "",
degree: "C",
weather: "",
iconURL: ""
},

created: function(){
this.getWeather();
},

methods: {
getWeather: function(){
var that = this;

this.$http.get("http://ipinfo.io").then((response) => {
console.log(response.data);
that.location = response.data.city + ", " + response.data.country;

// Get weather informaiton
var api = 'ebd4d312f85a230d5dc1db91e20c2ace';
var city = response.data.city;
var url = "http://api.openweathermap.org/data/2.5/weather?q={CITY}&APPID={APIKEY}&units=metric";
url = url.replace("{CITY}",city);
url = url.replace("{APIKEY}", api);

that.$http.post(url,{dataType: 'jsonp'},{
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
}}).then((response) => {
console.log(response.data);
that.temperature = response.data.main.temp;
that.weather = response.data.weather[0]['description'];
that.iconURL = "http://openweathermap.org/img/w/" + response.data.weather[0]['icon'] + ".png";
}, (response) => {
// error callback
});

}, (response) => {
console.log(response.data);
});
},

changeDegree: function() {
if(this.degree == "C"){
this.degree = "F";
this.temperature = Math.round((this.temperature*9/5 + 32)*100)/100;
}else {
this.degree = "C";
this.temperature = Math.round(((this.temperature - 32)*5 /9)* 100)/100;
}
}
}
})


It works well on my laptop but not on mobile. At first, I thought that it is because of Codepen. It may cause something when running through the site. However, when I created a project on my website, it also doesn't work.

Can you help to find the issue? Thanks,

Answer

I found a solution for this. I works on my mobile now. I believe that I will work on other browses too. The problem is that some browsers doesn't recognize the operation ">", so I changed it.

Here is the new code:

getWeather: function(){
            var that = this;

            this.$http.get('http://ipinfo.io', {'headers': {
        'Origin': 'http://yourdomain.com'}
            }).then(function(response) {
                  console.log(response.data);
                  that.location = response.data.city + ", " + response.data.country;

                  // Get weather informaiton
                  var api = 'ebd4d312f85a230d5dc1db91e20c2ace';
                  var city = response.data.city;
                  var url = "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q={CITY}&APPID={APIKEY}&units=metric";
                  url = url.replace("{CITY}",city);
                  url = url.replace("{APIKEY}", api); 

                  that.$http.post(url,{dataType: 'jsonp'},{
              headers : {
                'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
            }}).then(function(response) {
                    console.log(response.data);
                  that.temperature = response.data.main.temp;
                  that.weather = response.data.weather[0]['description'];
                  that.iconURL = "http://openweathermap.org/img/w/" + response.data.weather[0]['icon'] + ".png";
                  }).then(function(){
                      // error callback
                  });

              }).then(function(){
                  console.log(response.data);            
              });            
          },
Comments