Vue.js 动态数据不'；在Vuejs中更改v-model输入值时更新

我正在用这个构建一个天气应用程序。我试图添加一个

字段值，当它更改城市名称时，该值将更新其他预测值

我已经创建了更新城市值的

字段&它应该相应地更新天气预报。我知道

v-model

正在工作，但它不会改变数据结果。只有当我在

Vue实例中硬编码另一个城市时，数据才会更新更改

<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>


{{msg}}
一个天气应用程序构建了Vuejs和开放天气应用程序。曼努埃尔·阿巴斯卡尔制造

马上：
城市：{{currentCity}
经度：{{currentWeather.coord.lon}
纬度：{{currentWeather.coord.lat}
天气状况{{currentWeather.Weather[0].说明}
温度中间：{{currentWeather.main.temp}Farenheit
最高温度：{{currentWeather.main.temp_Max}Farenheit
最低温度：{{currentWeather.main.temp_Min}Farenheit
湿度：{{currentWeather.main.湿度}}%
风：{currentWeather.Wind.speed}mph
//导入Axios
从“axios”导入axios
导出默认值{
姓名：“家”，
道具：{
msg:String，
},
数据（）{
返回{
//当前天气
当前天气：空，
//当前城市
当前城市：“蒙特利尔”，
//当前国家
当前国家：'ca'，
单位：'帝国'
}
此.$set（此.currentCity）；
},
安装的（）{
//请求axios打开天气api
axios.get（）https://api.openweathermap.org/data/2.5/weather?q=“+this.currentCity+”、“+this.currentCountry+”&appid=fe43501a7f0d2f2172cf539248f7&units=”+this.unit+”）
。然后（（响应）=>{
//获取响应对象并将其存储在currentWeather中
this.currentWeather=response.data
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
})
}
};

当我转到蒙特利尔、多伦多、渥太华、阿尔伯塔等城市时，我正在尝试。它会相应地更改预测。
您没有用于
currentCity
更改的事件处理程序。因此，您的代码将在初始负载下工作（即在
装载的
），而更改到
当前城市
将不会更改任何天气数据

您需要将
@change
添加到输入中，并在每次更改时获取新的api数据

下面是示例代码


newvue({
el:“#应用程序”，
数据（）{
返回{
//当前天气
当前天气：空，
//当前城市
当前城市：“蒙特利尔”，
//当前国家
当前国家：'ca'，
单位：'帝国'
}
此.$set（此.currentCity）；
},
方法：{
getWeather（）{
//请求axios打开天气api
取（'https://api.openweathermap.org/data/2.5/weather?q=“+this.currentCity+”、“+this.currentCountry+”&appid=fe43501a7f0d2f2172cf539248f7&units=”+this.unit+”）
。然后（res=>res.json（））。然后（data=>{
//获取响应对象并将其存储在currentWeather中
此.currentWeather=数据；
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
})
}
},
安装的（）{
这个。getWeather（）；
}
})

一个天气应用程序构建了Vuejs和开放天气应用程序。曼努埃尔·阿巴斯卡尔制造

搜索：
马上：
城市：{{currentWeather.name}
经度：{{currentWeather.coord.lon}
纬度：{{currentWeather.coord.lat}
天气状况{{currentWeather.Weather[0].说明}
温度中间：{{currentWeather.main.temp}Farenheit
最高温度：{{currentWeather.main.temp_Max}Farenheit
最低温度：{{currentWeather.main.temp_Min}Farenheit
湿度：{{currentWeather.main.湿度}}%
风：{currentWeather.Wind.speed}mph
找不到“{currentCity}}”
有两个主要问题妨碍代码按预期工作

V-模型
输入中的
v-model
应该是
currentCity
数据值，而不是API响应中的值，
currentWeather.name

这样，当输入更改时，
currentCity
将被更新，您可以对其更改做出反应并请求新数据

请求数据
在
挂载的
钩子中完成天气请求，只需获取一次数据就可以了，因为在组件的生命周期内不会再次执行该钩子，所以城市的变化不会起任何作用

解决方案
我会将
v-model
更改为
currentCity
，并在
currentCity
上添加一个监视程序，因此当它更改时，它会触发对获取天气的函数的调用，同时，使该监视程序立即生效，也将保证它在组件安装上运行

我有更新代码的问题。
您有两个问题：

首先，输入绑定为currentWeather.name而不是currentCity

其次，在装载的生命周期中有axios请求。即使currentCity模型发生更改，您也没有定义
当它改变时就会发生。当当前城市发生变化时，您需要添加一个api调用

将输入的型号更改为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方法

您可以将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);
                })
        },
    },
};