[Vuejs]-Vue 3 How to dynamically load data from server and show in a v-for loop

by

3👍

✅

When using vue, the variables must be reactive to make changes on data. It’s also accessible on .value. Read more on this https://vuejs.org/guide/essentials/reactivity-fundamentals.html and accessing the refs https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs

Here’s a sample working code

<template>
  <ul v-for="number in numbers">
    <li>{{ number.num }} : {{ number.text }}</li>
  </ul>
  {{ numbers }}
</template>

<script setup>
import { ref } from 'vue'
let numbers = ref([
  { num: 1, text: "One" },
  { num: 2, text: "Two" },
  { num: 3, text: "Three" }
]);

// simulate server
setTimeout(() => {
  numbers.value.push({ num: 4, text: "Four" });
  console.log(numbers); // returns the array correct
}, 3000);
</script>
👤Macknive

Leave a comment