[Vuejs]-Vue JS props gives undefined even declared in parent

by

0👍

✅

The v-for directive does not automatically assign the attribute to the generated component; it just makes that variable available in scope and then lets you do with it what you wish. This includes doing simple operations on it, or giving it as a prop to a child component of the repeating component instead of to the root.

What you actually need to do is this:

<my-component v-for="(meat, index) in meats" :meat="meat" :key="meat.id" :index="index"></my-component>

It may look repetitive but it’s necessary to give you more freedom as to how exactly you want to use the elements of the array.

0👍

In fact, you don’t have index and meat as props but meats. So

Change this:

props:('index', 'meat'),

To this:

props:['meats'], // also to note, it's in array syntax

Leave a comment