[Vuejs]-Why is this v-for not rendering properly and Am I returning it properly in the template?

by

3👍

✅

events needs to be a ref or reactive for it to be reactive in the template:

// EventList.vue         👇
import { onBeforeMount, ref } from 'vue'

export default {
  name: 'EventList',
  components: {
    EventCard,
  },
  setup() {       👇
    let events = ref([])

    onBeforeMount(async () => {
      const res = await axios.get('https://my-json-server.typicode.com/Tommydemian/real-world-vue-3/db')
      const { data } = res
              👇
      events.value = data.events
      console.log(events.value)
    })

    return {
      events,
    }
  },
}

demo

👤tony19

1👍

on your console events has another object called events you need to assign data to res.events to access the main array of objects

you are passing events instead of event

<template>
  <div class="home">
    <EventCard v-for="event in events" :key="event.id" :event="event" />
  </div>
</template> ```
👤muyah

1👍

You just need to pass event as props in EventCard and not events. Since events is the collection of data. It has to be looped again once taken into the child component as props. Since you are looping events in the parent component. It is better to pass only the event through props.

<EventCard v-for="event in events" :key="event.id" :event="event" />
👤Sujith Sandeep

Leave a comment