我正在使用这个Weather API构建一个天气应用程序。我正在尝试添加一个<input>
字段值,当它更改城市名称时,然后更新其他值预测。
我创建了<input>
更新城市价值的字段,它应该相应地更新天气预报。我知道它v-model
正在工作,但它不会改变数据结果。只有当我在数据中对不同的城市进行硬编码时,Vue-instance
才会更新更改。
<template>
<div class="home">
<h1>{{ msg }}</h1>
<p>A weather app built Vuejs & Open Weather App. Made by Manuel Abascal</p>
<input type="text" v-model.lazy="currentWeather.name">
<div class="forecast">
<div v-if="this.currentWeather">
<!-- Forecast stat values -->
<h2>Right now:</h2>
<div><strong>City:</strong> {{ currentCity }}</div>
<div><strong>Longitude: </strong> {{ currentWeather.coord.lon }}</div>
<div><strong>Latitude: </strong> {{ currentWeather.coord.lat }}</div>
<div><strong>Weather condition </strong> {{ currentWeather.weather[0].description }}</div>
<div><strong>Temperature Mid: </strong> {{ currentWeather.main.temp }} Farenheit</div>
<div><strong>Temperature Max: </strong> {{ currentWeather.main.temp_max}} Farenheit</div>
<div><strong>Temperature Min: </strong> {{ currentWeather.main.temp_min}} Farenheit</div>
<div><strong>Humidity: </strong> {{ currentWeather.main.humidity }}%</div>
<div><strong>Wind: </strong> {{ currentWeather.wind.speed }} mph</div>
</div>
</div>
</div>
</template>
<script>
// import Axios
import axios from "axios"
export default {
name: "Home",
props: {
msg: String,
},
data(){
return {
// current weather
currentWeather: null,
// current city
currentCity: 'Montreal',
// current country
currentCountry: 'ca',
unit: 'imperial'
}
this.$set(this.currentCity);
},
mounted(){
// Make axios request to open weather api
axios.get('https://api.openweathermap.org/data/2.5/weather?q='+this.currentCity+','+this.currentCountry+'&appid=fe435501a7f0d2f2172ccf5f139248f7&units='+this.unit+'')
.then((response) => {
// takes response object & stores it in currentWeather
this.currentWeather = response.data
})
.catch(function (error) {
// handle error
console.log(error);
})
}
};
</script>
<style scoped lang="scss">
</style>
当我换到蒙特利尔、多伦多、渥太华、阿尔伯塔等城市时,我正在尝试。它会相应地改变预测。