Vue component pass multiple objects as props not working

Question

I'm trying to pass multiple props to a component via v-for --

<my-component v-for="(myobj, myid) in mydata"></my-component>

where mydata looks like --

mydata: {
  42: { txt: "Home", url: "https://google.com/" },
  43: { txt: "SO", url: "https://stackoverflow.com/" }
}

But couldn't get the simplest snippet to work --

Any pointer will be much appreciated!

tony19 · Accepted Answer · 2022-07-15 21:04:49Z

5

Your v-for loop is not binding any data to the component. It's missing v-bind directives for your bindings. It should look like this:

<my-component v-for="(myobj, myid) in mydata"
             :myobj="myobj"
             :myid="myid"></my-component>

answered Dec 16, 2018 at 6:15

tony19

140k24 gold badges281 silver badges354 bronze badges

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

4 Comments

You are my hero! Can't believe I missed something this basic.

@JerryJi No problem :)

Thanks Bro. This is great answer. I have applied it like this. <my-component v-for="(item, index) in mydata" :source="data" :key="index" />

@HoangTranSon No problem :)