英文:
This is a question when using openweather API with axios
问题
以下是代码部分的中文翻译：
<template>
<div id="container">
<h1>今日报告</h1>
<img :src="icon" alt="" />
<h2> <span>{{ city }}</span> 的天气 <br />
<b> {{ dsc }}</b>
</h2>
<p>温度: {{ temp }}<span>&#176;</span></p>
<form>
<h3>
<span>请输入城市</span>
</h3>
<input type="text" v-model="city" />
<!-- <button @click="weatherData">确认</button> -->
</form>
</div>
</template>
<script>
import axios from "axios";
import background from "@/assets/background";
export default {
data() {
return {
bg: background,
icon: "",
dsc: "",
temp: "",
city: "seoul",
mainDsc: ''
};
},
mounted() {
this.weatherData();
},
updated() {
this.weatherData();
},
methods: {
weatherData() {
axios
.get(
" https://api.openweathermap.org/data/2.5/weather?q=" + this.city + "&appid=209427778b168dd3cfb8c77b931a8344&units=metric"
)
.then((response) => {
let data = response.data;
console.log(this.city)
this.dsc = data.weather[0].main;
// 主要描述
this.mainDsc = data.weather[0].main
this.temp = data.main.temp;
this.icon = "https://openweathermap.org/img/wn/" + data.weather[0].icon + "@2x.png";
const container = document.querySelector('#container')
for (let i = 0; i < this.bg.length; i++) {
if (this.mainDsc == this.bg[i].main) {
container.style.background = this.bg[i].background
}
}
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
希望这有助于您的项目！如果您有其他问题，请随时提问。
英文:
<template>
<div id="container">
<h1>Todays Reports</h1>
<img :src="icon" alt="" />
<h2> <span>{{ city }}</span> 's weather <br />
<b> {{ dsc }}</b>
</h2>
<p>temp: {{ temp }}<span>&#176;</span></p>
<form>
<h3>
<span> 도시</span>를 입력하세요
</h3>
<input type="text" v-model="city" />
<!-- <button @click="weatherData">확인</button> -->
</form>
</div>
</template>
<script>
import axios from "axios";
import background from "@/assets/background";
export default {
data() {
return {
bg: background,
icon: "",
dsc: "",
temp: "",
city: "seoul",
mainDsc: ''
};
},
mounted() {
this.weatherData();
},
updated() {
this.weatherData();
},
methods: {
weatherData() {
axios
.get(
" https://api.openweathermap.org/data/2.5/weather?q=" + this.city + "&appid=209427778b168dd3cfb8c77b931a8344&units=metric"
)
.then((response) => {
let data = response.data;
console.log(this.city)
this.dsc = data.weather[0].main;
// main 설명글
this.mainDsc = data.weather[0].main
this.temp = data.main.temp;
this.icon = "https://openweathermap.org/img/wn/" + data.weather[0].icon + "@2x.png";
const container = document.querySelector('#container')
for (let i = 0; i < this.bg.length; i++) {
if (this.mainDsc == this.bg[i].main) {
container.style.background = this.bg[i].background
}
}
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
It has been implemented to some extent, but it is not different, and when the weatherData keyup.enter event is performed on the input, it is set to the default setting, seoul. It contains the input entered by the user as v-model, but I don't know why!
If I call the function with updated, it runs, but if I press enter, it changes back to Seoul..!
Advice from experts please
答案1
得分: 1
每次按回车键时，它会提交表单。表单提交的默认行为会重新加载组件，然后默认返回'首尔'作为城市。
尝试将事件监听器绑定到表单的提交事件，并在update()方法上注释掉方法调用。这将防止过多的API调用。
<form @submit.prevent="weatherData">
<h3><span>城市</span>를 입력하세요</h3>
<input type="text" v-model="city" />
<button>确认</button>
</form>
相反，如果你希望该方法在输入事件上触发，你应该在发送API调用之前验证输入值，因为某些较短的输入会引发404错误。
英文:
Every time you hit enter, it submits the form. The default behavior for form submission reloads the component, which then by default returns 'seoul' for city.
Try binding an event listener to the form's submission, and comment out the method call on update(). This will prevent excessive API calls.
<form @submit.prevent="weatherData">
<h3><span> 도시</span>를 입력하세요</h3>
<input type="text" v-model="city" />
<button>확인</button>
</form>
Conversely, if you want the method to fire on input event, you should validate the input value before sending the API call, as some of the shorter entries throw a 404.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论