VueJS 不适用于移动设备 [英] VueJS doesn't work on mobile
本文介绍了VueJS 不适用于移动设备的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在移动设备上运行 VueJS 时遇到问题.我在coppen.io 上创建了一个天气预报应用程序
这是项目的链接:
http://codepen.io/techcater/pen/xOZmgv
HTML 代码:
<h1>您当地的天气</h1><p>{{地点}}</p><p>{{温度}}<a @click="changeDegree">{{degree}}</a></p><p>{{天气 |大写}}</p><img :src="iconURL" alt=""/><br><a href="https://ca.linkedin.com/in/dalenguyenblogger" target="_blank">by Dale Nguyen</a><!-- <pre>{{$data |json}}</pre>-->JS代码:
new Vue({el: '.container-fluid',数据: {地点: ""，温度: ""，学位:C"，天气: ""，图标网址:"},创建:函数(){this.getWeather();},方法: {获取天气:函数(){var that = this;this.$http.get("http://ipinfo.io").then((response) => {控制台日志(响应数据)；that.location = response.data.city + ", " + response.data.country;//获取天气信息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);那.$http.post(url,{dataType: 'jsonp'},{标题:{'内容类型':'应用程序/x-www-form-urlencoded;字符集=UTF-8'}}).then((响应) => {控制台日志(响应数据)；那.温度 = response.data.main.temp;that.weather = response.data.weather[0]['description'];that.iconURL = "http://openweathermap.org/img/w/" + response.data.weather[0]['icon'] + ".png";}, (响应) =>{//错误回调});}, (响应) =>{控制台日志(响应数据)；});},变化程度:函数(){if(this.degree == "C"){this.degree = "F";this.temperature = Math.round((this.temperature*9/5 + 32)*100)/100;}别的 {this.degree = "C";this.temperature = Math.round(((this.temperature - 32)*5/9)* 100)/100;}}}})它在我的笔记本电脑上运行良好，但不适用于移动设备.一开始以为是Codepen的缘故.在网站上运行时可能会导致某些问题.但是，当我在我的网站上创建一个项目时，它也不起作用.
你能帮忙找出问题吗?谢谢，
解决方案
我找到了解决方案.我现在在我的手机上工作.我相信我也会在其他浏览器上工作.问题是有些浏览器无法识别>"操作，所以我改了.
这是新代码:
getWeather: function(){var that = this;this.$http.get('http://ipinfo.io', {'headers': {'来源':'http://yourdomain.com'}}).then(函数(响应){控制台日志(响应数据)；that.location = response.data.city + ", " + response.data.country;//获取天气信息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);那.$http.post(url,{dataType: 'jsonp'},{标题:{'内容类型':'应用程序/x-www-form-urlencoded;字符集=UTF-8'}}).then(函数(响应){控制台日志(响应数据)；那.温度 = 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(函数(){//错误回调});}).then(函数(){控制台日志(响应数据)；});},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,
解决方案
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);
});
},
这篇关于VueJS 不适用于移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
