Pass for loop item to prop

Question

How do you pass the item instance from the foreach loop as a prop?

<div v-for="n in parentArray">
  <blog-card prop="{{ n.content }}"></blog-card>
</div>

When I run this I get an error

(Emitted value instead of an instance of Error)

Can this be done without rebinding the item to the parent component?

Answer 1

With Vue 2 you don't use interpolation in attributes, you use the attribute binding syntax.

<blog-card v-bind:prop="n.content"></blog-card>

Or the shortcut

<blog-card :prop="n.content"></blog-card>