CODEWITHSUNDEEP
vue.jsvuejs2
MauirceA
MauirceA

Reputation: 321

Vue: using v-for on a child component?

I am confused as to how to use a v-for and pass that data in. In my example, do I have to pass the prop for :entry=entry in or does it know since it's looping through?

App.vue

<UserEntry v-for="entry in entries" ></UserEntry

data() {
   return {
      entries: [
          {id: 2, name: 'foo'}
      ]
   }
}

UserEntry

<div> {{ name }} </div>

Upvotes: 1

Views: 1757

Answers (1)

Zooly
Zooly

Reputation: 4787

You have to pass props to your component, regardless looping on it or not.

<UserEntry v-for="entry in entries" :key="entry.id" :entry="entry" />

Don't forget to specify to your UserEntry component that you will pass some props.

<template>
  <div>
    {{ entry.name }}
  </div>
</template>

<script>
export default {
  name: 'user-entry',
  props: {
    entry: {
      type: Object,
      required: true
    }
  }
}
</script>

Upvotes: 3

Related Questions