Vue.js从API调用中呈现新的数据

Question

我正在制作一个用Vue.js编写的天气应用程序，它定期获取天气数据，但我有一个问题，在初始API调用后呈现新数据。

在数据中声明空数据数组，并使用计时器获取新数据，如下:

data() {
return {
weatherData: [],
timer: '',
};
},

我已经在方法中声明了数据获取，如下所示:

methods: {
async fetchWeatherData() {
const response = await fetch("http://localhost:5002/timeseries");
const data = await response.json();
if (response.ok) {
console.log("Data fetched sucssefully!");
}
return data;
},

当应用程序加载时，fetchWeatherData和setInterval被启动:

async created() {
this.weatherData = await this.fetchWeatherData();
setInterval(() => this.timer = this.fetchWeatherData(), 10000)
},

问题是新数据没有呈现到DOM，尽管新数据被成功获取。

确保在成功获取时正确呈现新数据的最佳步骤是什么?

香港

Answer 1

在渲染天气数据的组件(或任何容器)中，添加一个键(如:key="renderWeatherKey")。添加renderWeatherKey到组件数据

data() {
return {
weatherData: [],
timer: '',
renderWeatherKey: 0
};
},

在fetchWeatherData()方法中，在"if"条件中添加这个。renderWeatherKey + +:

async fetchWeatherData() {
const response = await fetch("http://localhost:5002/timeseries");
const data = await response.json();
if (response.ok) {
console.log("Data fetched sucssefully!");
this.renderWeatherKey++
}
return data;
},

你可以用它强制重新渲染。

Answer 2

解决方案,所发布的詹姆斯·汤姆森在Vue论坛设置setInterval异步,自也是异步的获取方法。点击这里查看完整答案。