Question

从API提取后，我无法更新DOM。

我的对象正在正确获取数据，但是DOM之前已呈现，并且在收到API数据后不会更新，我似乎无法理解为什么不更新自身。

这是我的代码：

<template>
  <div>
    <h1>Weather</h1>
    {{ weather }} 
  </div>
</template>

<script>
export default {
  name: 'Weather',

data() {
    return {
      weather : {},
    }

  },
  created() {
      this.getWeather()
  },

  methods: {
    async getWeather() {
      let self = this;
          try {
            const response = await fetch('https://api.weatherbit.io/v2.0/current?city=Berlin&country=DE&key=KEY');
            const myJson = await response.json();
            self.weather.temp = myJson.data[0].temp;
            self.weather.sensation = myJson.data[0].app_temp;
            self.weather.description = myJson.data[0].weather.description;
        } catch (error) {
            console.error(error);
        }
    }

</script>

Answer 1

我认为您应该将逻辑插入Mounted（）而不是created（）中，这应该可以解决渲染问题。

<template>
  <div>
    <h1>Weather</h1>
    {{ weather }} 
  </div>
</template>

<script>
export default {
  name: 'Weather',

data() {
    return {
      weather : {},
    }

  },
  mounted() {
      this.getWeather()
  },

  methods: {
    async getWeather() {
      let self = this;
          try {
            const response = await fetch('https://api.weatherbit.io/v2.0/current?city=Berlin&country=DE&key=dcbea1b771ab41f09cd6b138d8cd50c2');
            const myJson = await response.json();
            self.weather.temp = myJson.data[0].temp;
            self.weather.sensation = myJson.data[0].app_temp;
            self.weather.description = myJson.data[0].weather.description;
        } catch (error) {
            console.error(error);
        }
    }

</script>

这些是Vue生命周期中的步骤：

beforCreate，创建，在安装之前，已安装在更新之前，更新，在销毁之前，毁了

希望这将帮助您了解Vue的生命周期：）

Answer 2

您应该像这样直接将响应值分配给weather属性。

methods: {
   async getWeather() {
     let self = this;
         try {
           const response = await fetch('https://api.weatherbit.io/v2.0/current?city=Berlin&country=DE&key=dcbea1b771ab41f09cd6b138d8cd50c2');
           const myJson = await response.json();
           self.weather = myJson.data[0].temp;
           console.log(self.weather);
       } catch (error) {
           console.error(error);
       }
   }
 }

这是工作示例。

https://jsfiddle.net/srfpw785/

从VueJS中的API提取后更新DOM

2 个答案: