我獲取的數據未在 nuxt 3 的模板中呈現

Question

我從 api 獲取數據，當我在我的異步函數中記錄它時我可以看到它，但是我的數組中的數據沒有呈現在我的 Nuxt 3 模板上

我的腳本設置中的代碼：

//ARRAY OF ALL THE DAILY WEATHER DATA PER DAY
let allDataWeather=[];
    (async () => {
      // first
      for (let key in arrayOfUrls) {
        let value = arrayOfUrls[key];
        const res = await fetch(value);
        const result1 = await res.json();
    
        console.log("Result", result1);
        allDataWeather.push(result1)
      }
      for (let key in allDataWeather) {
        console.log(allDataWeather[key])
      }
    
    })();

我模板中的代碼：

<template>
  <div>
  <h1>Testing api cities</h1>
    <ul>
      <li v-for="data in allDataWeather" >
        {{data}}
      </li>
    </ul>
</div>
</template>

我試過使用 a:key value 但沒有用

Answer 1

您的變量allDataWeather不是反應性的，您需要使用ref或反應性Vue 方法使其具有反應性。

const allDataWeather = reactive([]);

// your logics
allDataWeather.value.push(yourNewWeatherValue);

另外，請注意<script setup>默認情況下是異步的，因此您可以在內部使用await而不用破解。