We are fetching data from API like:
<script setup>
import { onMounted, inject } from 'vue'
let list = [];
function init() {
axios
.post("/some-link/here")
.then((o) => {
list = o.data.bla;
console.log(list);
})
.catch((o) => {
//TO DO
});
}
onMounted(() => {
init();
});
</script>
The console.log
shows the list properly.
But on the template, it does not update.
<p v-for="(val, index) in list" :key="index">
{{ val.name }}
</p>
CodePudding user response:
This works well
<script setup>
import { ref, onMounted } from "vue";
const users = ref([]);
async function fetchData() {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
return await response.json();
}
onMounted(async () => {
users.value = await fetchData();
});
</script>
<template>
<div v-for="user in users" :key="user.id">
{{ user.id }}