在 Vuejs 中更改 v-model 输入值时动态数据不会更新
Dynamically data doesn't update when changing v-model input value in Vuejs
我正在用这个 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>
当我换到蒙特利尔、多伦多、渥太华、阿尔伯塔等城市时,我正在尝试。它相应地改变了预测。
您没有 currentCity
更改的事件处理程序。因此,您的代码将在初始加载时运行(即在 mounted
上)并且对 currentCity
的更改不会更改任何天气数据。
您需要将 @change
添加到输入并在每次更改时获取新的 api 数据。
下面是示例代码
new Vue({
el: '#app',
data() {
return {
// current weather
currentWeather: null,
// current city
currentCity: 'Montreal',
// current country
currentCountry: 'ca',
unit: 'imperial'
}
this.$set(this.currentCity);
},
methods: {
getWeather() {
// Make axios request to open weather api
fetch('https://api.openweathermap.org/data/2.5/weather?q=' + this.currentCity + ',' + this.currentCountry + '&appid=fe435501a7f0d2f2172ccf5f139248f7&units=' + this.unit + '')
.then(res => res.json()).then(data => {
// takes response object & stores it in currentWeather
this.currentWeather = data;
})
.catch(function(error) {
// handle error
console.log(error);
})
}
},
mounted() {
this.getWeather();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div class="home">
<p>A weather app built Vuejs & Open Weather App. Made by Manuel Abascal</p>
Search: <input type="text" v-model.lazy="currentCity" @change="getWeather">
<div class="forecast" v-if="currentWeather && currentWeather.cod == 200">
<!-- Forecast stat values -->
<h2>Right now:</h2>
<div><strong>City:</strong> {{ currentWeather.name }}</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 v-else>
"{{ currentCity }}" is not found
</div>
</div>
</div>
有 2 个主要问题阻止您的代码按预期工作。
v-model
输入中的 v-model
应该是 currentCity
数据值,而不是 API、currentWeather.name
.[=19= 的响应中的值]
这样,当输入更改时,currentCity
将更新,您可以对其更改做出反应并请求新数据。
请求数据
在 mounted
钩子中完成天气请求只获取一次数据就可以了,因为这个钩子在组件的生命周期内不会再次执行,城市的变化不会做任何事情。
解决方案
我会将 v-model
更改为 currentCity
,并在 currentCity
上添加一个观察者,因此当它发生变化时,它会触发对获取天气的函数的调用,还有,让这个观察者立即生效,将保证它也能在组件挂载上运行。
我有一个带有更新代码的 jsfiddle here。
您有两个问题:
首先,输入绑定 currentWeather.name 而不是 currentCity
其次,您在已安装的生命周期中有 axios 请求。即使 currentCity 模型发生变化,您也没有定义什么
当它改变时会发生。您需要在 currentCity 更改时添加一个 api 调用。
将输入的模型更改为当前城市<input type="text" v-model="currentCity">
将 axios 请求移动到它自己的方法
getWeather() {
const url = 'https://api.openweathermap.org/data/2.5/weather?q=' + this.currentCity + ',' + this.currentCountry + '&appid=fe435501a7f0d2f2172ccf5f139248f7&units=' + this.unit + '';
axios.get(url)
.then((response) => {
this.currentWeather = response.data;
})
.catch(function(error) {
console.log(error);
})
}
将输入更改绑定到 getWeather 方法
可以在currentCity输入的输入法中添加getWeather事件
<input type="text" v-model="currentCity" @input="getWeather">
或为当前天气添加观察者
watch: {
currentCity: function(newCity, oldCity) {
this.getWeather();
}
}
奖金
每次您写下或擦除输入的字母时,该方法都会触发。添加去抖动或超时,它会在毫秒后触发。
// import Axios
import axios from "axios"
export default {
name: "Home",
props: {
msg: String,
},
data() {
return {
currentWeather: null,
currentCity: 'Montreal',
currentCountry: 'ca',
unit: 'imperial'
};
},
watch: {
currentCity: function(newCity, oldCity) {
this.debounceGetWeather();
},
},
mounted() {
this.getWeather();
},
methods: {
debounceGetWeather() {
setTimeout(() => {
this.getWeather();
}, 300);
},
getWeather() {
axios.get('https://api.openweathermap.org/data/2.5/weather?q=' + this.currentCity + ',' + this.currentCountry + '&appid=fe435501a7f0d2f2172ccf5f139248f7&units=' + this.unit + '')
.then((response) => {
this.currentWeather = response.data '
})
.catch(function(error) {
console.log(error);
})
},
},
};
我正在用这个 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>
当我换到蒙特利尔、多伦多、渥太华、阿尔伯塔等城市时,我正在尝试。它相应地改变了预测。
您没有 currentCity
更改的事件处理程序。因此,您的代码将在初始加载时运行(即在 mounted
上)并且对 currentCity
的更改不会更改任何天气数据。
您需要将 @change
添加到输入并在每次更改时获取新的 api 数据。
下面是示例代码
new Vue({
el: '#app',
data() {
return {
// current weather
currentWeather: null,
// current city
currentCity: 'Montreal',
// current country
currentCountry: 'ca',
unit: 'imperial'
}
this.$set(this.currentCity);
},
methods: {
getWeather() {
// Make axios request to open weather api
fetch('https://api.openweathermap.org/data/2.5/weather?q=' + this.currentCity + ',' + this.currentCountry + '&appid=fe435501a7f0d2f2172ccf5f139248f7&units=' + this.unit + '')
.then(res => res.json()).then(data => {
// takes response object & stores it in currentWeather
this.currentWeather = data;
})
.catch(function(error) {
// handle error
console.log(error);
})
}
},
mounted() {
this.getWeather();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div class="home">
<p>A weather app built Vuejs & Open Weather App. Made by Manuel Abascal</p>
Search: <input type="text" v-model.lazy="currentCity" @change="getWeather">
<div class="forecast" v-if="currentWeather && currentWeather.cod == 200">
<!-- Forecast stat values -->
<h2>Right now:</h2>
<div><strong>City:</strong> {{ currentWeather.name }}</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 v-else>
"{{ currentCity }}" is not found
</div>
</div>
</div>
有 2 个主要问题阻止您的代码按预期工作。
v-model
输入中的 v-model
应该是 currentCity
数据值,而不是 API、currentWeather.name
.[=19= 的响应中的值]
这样,当输入更改时,currentCity
将更新,您可以对其更改做出反应并请求新数据。
请求数据
在 mounted
钩子中完成天气请求只获取一次数据就可以了,因为这个钩子在组件的生命周期内不会再次执行,城市的变化不会做任何事情。
解决方案
我会将 v-model
更改为 currentCity
,并在 currentCity
上添加一个观察者,因此当它发生变化时,它会触发对获取天气的函数的调用,还有,让这个观察者立即生效,将保证它也能在组件挂载上运行。
我有一个带有更新代码的 jsfiddle here。
您有两个问题:
首先,输入绑定 currentWeather.name 而不是 currentCity
其次,您在已安装的生命周期中有 axios 请求。即使 currentCity 模型发生变化,您也没有定义什么 当它改变时会发生。您需要在 currentCity 更改时添加一个 api 调用。
将输入的模型更改为当前城市
<input type="text" v-model="currentCity">
将 axios 请求移动到它自己的方法
getWeather() { const url = 'https://api.openweathermap.org/data/2.5/weather?q=' + this.currentCity + ',' + this.currentCountry + '&appid=fe435501a7f0d2f2172ccf5f139248f7&units=' + this.unit + ''; axios.get(url) .then((response) => { this.currentWeather = response.data; }) .catch(function(error) { console.log(error); }) }
将输入更改绑定到 getWeather 方法
可以在currentCity输入的输入法中添加getWeather事件
<input type="text" v-model="currentCity" @input="getWeather">
或为当前天气添加观察者
watch: {
currentCity: function(newCity, oldCity) {
this.getWeather();
}
}
奖金
每次您写下或擦除输入的字母时,该方法都会触发。添加去抖动或超时,它会在毫秒后触发。
// import Axios
import axios from "axios"
export default {
name: "Home",
props: {
msg: String,
},
data() {
return {
currentWeather: null,
currentCity: 'Montreal',
currentCountry: 'ca',
unit: 'imperial'
};
},
watch: {
currentCity: function(newCity, oldCity) {
this.debounceGetWeather();
},
},
mounted() {
this.getWeather();
},
methods: {
debounceGetWeather() {
setTimeout(() => {
this.getWeather();
}, 300);
},
getWeather() {
axios.get('https://api.openweathermap.org/data/2.5/weather?q=' + this.currentCity + ',' + this.currentCountry + '&appid=fe435501a7f0d2f2172ccf5f139248f7&units=' + this.unit + '')
.then((response) => {
this.currentWeather = response.data '
})
.catch(function(error) {
console.log(error);
})
},
},
};