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應該放在第一位。