Home > other >  Vue 3 list does not update
Vue 3 list does not update

Time:12-04

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 }}            
  • Related