VueJSがモバイルで動作しない

Question

モバイルデバイスでVueJSを実行する際に問題があります。

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

HTMLコード：：私はここではプロジェクトのリンクですcopepen.io

上の天気予報アプリを作成し

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

ノートパソコンではうまく動作しますが、モバイルではうまく動作しません。最初は、それはコデペンのためだと思った。サイトを通過するときに何かが発生する可能性があります。しかし、自分のウェブサイトでプロジェクトを作成したときにも、それは機能しません。

問題を見つけるお手伝いができますか？ありがとう、

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

を参照してください。例：私はまた、あなたが間違った順序でvue.min.jsとvue-resource.jsスクリプトを置く気づいhttp://bozue.com/weather.html

それは何らかのエラーを引き起こす可能性があります。vue.min.jsが最初になければなりません。