无法使用Vue.js从opendweathermap获取天气数据
无法使用Vue.js从opendweathermap获取天气数据
提问于 2018-06-07 04:15:37
我想用Vue.js创建一个简单的天气报告网站，我刚刚学习了这个框架，并且以前访问过公共数据。但这一次我被卡住了。
我尝试过获取数据的方法有两个版本。
var app = new Vue({
el: "#weather",
data: {
city: '',
weather:[],
date: new Date().toDateString(),
greeting:''
},
methods: {
//method 1
getData: function () {
var city = this.city
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&lang=en&appid=a495404234abce9b5830b1e8d20e90a6",
function (data) {
console.log(data)
});
},
//method 2
getData: function () {
$("#search").keypress(function (e) {
if (e.which == 13) {
var city = $("#search").val();
if (city != " ") {
var url = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&lang=en&appid=a495404234abce9b5830b1e8d20e90a6";
console.log(url);
}
$.getJSON(url, function (data) {
this.weather = data.weather;
console.log(data);
this.returnGreeting();
})
}
})
},
}
}
});<div class="container" id="weather">
<h1>Weather Pro</h1>
<div class="float-left"><h2>{{date}}</h2></div>
<div class="float-right" ><h3 id="time"></h3></div>
<p>{{greeting}}</p>
<div class="input-group">
<form>
<input v-model="city" class='searchbar transparent' id='search' type='text' placeholder=' enter city' />
<input id='button' @click="getData" type="button" value='GO' />
</form>
</div>
{{city}}
<div class="panel">
<div class="panel-body" v-for="d in data">
<p>
{{data}}
</p>
</div>
<ul class="list-group list-group-flush">
<!-- <li class="list-group-item">{{data.weather[0].main}}</li>
<li class="list-group-item">{{data.weather[0].description}}</li> -->
</ul>
</div>
</div>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
我得到一个错误：
Vue warn:属性或方法"data“未在实例上定义，但在呈现过程中被引用。通过初始化此属性，确保此属性是反应性的，无论是在data选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。
回答 3
Stack Overflow用户
发布于 2018-06-07 04:27:26
考虑将data作为您的模型。
因此使用<div>{{city}}</div>而不是<div>{{data.city}}</div>
var app = new Vue({
el: "#weather",
data() {
return {
city: '',
weather: [],
date: new Date().toDateString(),
greeting: ''
};
},
methods: {
getData() {
fetch("http://api.openweathermap.org/data/2.5/weather?q=" + this.city + "&units=metric&lang=en&appid=a495404234abce9b5830b1e8d20e90a6")
.then(res => res.json())
.then(data => {
this.weather = data.weather;
});
}
}
});<div class="container" id="weather">
<h1>Weather Pro</h1>
<div class="float-left">
<h2>{{date}}</h2>
</div>
<div class="float-right">
<h3 id="time"></h3>
</div>
<p>{{greeting}}</p>
<div class="input-group">
<form>
<input v-model="city" class='searchbar transparent' id='search' type='text' placeholder=' enter city' />
<input id='button' @click="getData" type="button" value='GO' />
</form>
</div>
{{city}}
<div class="panel">
<div class="panel-body" v-for="d in weather">
<p>
{{d}}
</p>
</div>
<ul class="list-group list-group-flush"></ul>
</div>
</div>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Stack Overflow用户
发布于 2018-06-07 04:32:05
看起来比我先一步，但这是一个使用jquery调用的版本
正如评论中提到的，问题是data.data没有定义。因此，在数据内部定义数据，并将result分配给this.data。但是，因为它在函数中并且作用域发生了变化，所以需要使用var that = this存储作用域，并使用that.data = data为结果赋值
dom：
<div class="container" id="weather">
<h1>Weather Pro</h1>
<div class="float-left"><h2>{{date}}</h2></div>
<div class="float-right" ><h3 id="time"></h3></div>
<p>{{greeting}}</p>
<div class="input-group">
<form>
<input v-model="city" class='searchbar transparent' id='search' type='text' placeholder=' enter city' />
<input id='button' @click="getData" type="button" value='GO' />
</form>
</div>
{{city}}
<div class="panel">
<div class="panel-body" v-for="d in data">
<p>
{{d}}
</p>
</div>
<ul class="list-group list-group-flush">
</ul>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>脚本：
var app = new Vue({
el: "#weather",
data: {
city: '',
weather:[],
date: new Date().toDateString(),
greeting:'',
data: null,
},
methods: {
//method 1
getData: function () {
var that = this;
var city = this.city
console.log('getData')
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&lang=en&appid=a495404234abce9b5830b1e8d20e90a6",
function (data) {
console.log(data)
that.data = data;
});
},
}
});这是一个example fiddle。
Stack Overflow用户
发布于 2018-06-07 15:57:46
我找出了导致问题的原因：
- 我需要在数据中定义数据，因为我直接在我的html页面中引用数据，但这是可选的。
- 发现bootstrap有一个超薄的jQuery版本，它覆盖了最小jQuery。
$.getJSON()需要最小的jQuery。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50728832
复制相关文章
相似问题