VueJS在手机上无法使用

Question

我在移动设备上运行VueJS时遇到问题。我创建了一个天气预报应用程序上copepen.io

这里是链接项目为：

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

HTML代码：

<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代码：

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

它适用于我的笔记本电脑，但不适用于手机。起初，我认为这是因为Codepen。通过网站运行时可能会导致某些情况。但是，当我在我的网站上创建项目时，它也不起作用。

你能帮忙找到问题吗？谢谢，

Answer 1

我找到了解决方案。我现在在手机上工作。我相信我也会在其他浏览器上工作。问题是有些浏览器不能识别操作“>”，所以我改变了它。

这是新代码：

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

Answer 2

你的代码似乎运行良好，除了在codepen上它给了我错误XMLHttpRequest cannot load http://ipinfo.io/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.。

你可以把你的域名上headers选项，从而实现跨产地，这里是例子：

this.$http.get('http://ipinfo.io', { 
    'headers': { 
     'Origin': 'http://yourdomain.com' 
    } 
}) 

见例如：http://bozue.com/weather.html

我也注意到你把vue.min.js和vue-resource.js脚本错误的顺序这可能会引发一些错误，vue.min.js应该放在第一位。