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

您的代碼似乎運行良好，除了在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. 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應該放在第一位。

Answer 2

我找到了解決方案。 我現在在手機上工作。 我相信我也會在其他瀏覽中工作。 問題是某些瀏覽器無法識別操作“>”，因此我對其進行了更改。

這是新代碼：

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