My fetched data doesn't render in my template in nuxt 3-CodePudding

I fetch data from an api and I can see it when I log it in my async function but the data in my array doesn't render on my template in Nuxt 3

the code in my script setup :

//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])
      }
    
    })();

code in my template :

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

I've tried using a :key value but that didn't work

CodePudding user response：

Your variable allDataWeather is not reactive, you need to make it reactive, using ref or reactive Vue methods.

const allDataWeather = reactive([]);

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

Also, note that <script setup> is async by default, thus you can use await inside without hacks.