vue composition api - initialize array of objects with JSON response

Question

I used vue 2 quiet a lot and now finally trying to slowly using vue 3 but I am already kind of buffled of how this works. In vue 2, I used the created method to fetch API data and populate my data arrays. Now I was trying the vue 3 way by using onMounted and I can log the API response. What I dont seem to find out is, how can I make my streams array to be initialized by the json response from the API now?

<script setup lang="ts">
import { ref, onMounted } from "vue";
let streams = ref(); //should be array of Objects {marketId, timeframe}
onMounted(() => {
  fetch("http://localhost:3000/stream")
    .then((response) => response.json())
    .then((result) => (streams.value = result)); //json response array  {marketId, timeframe}, {marketId, timeframe}
  console.log(streams.value); //returns undefined
});
</script>

Nikola Pavicevic · Accepted Answer · 2022-12-20 20:02:23Z

1

Try to wait for response:

const { ref, onMounted } = Vue
const app = Vue.createApp({
  setup() {
    let streams = ref();
    onMounted(async () => {
      await fetch("https://jsonplaceholder.typicode.com/users")
        .then((response) => response.json())
        .then((result) => (streams.value = result)); 
    });
    return {
      streams,
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="stream in streams">
    {{ stream }}
  </div>
</div>

answered Dec 20, 2022 at 20:02

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue composition api - initialize array of objects with JSON response

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related