CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Jerry Ji
Jerry Ji

Reputation: 386

Vue component pass multiple objects as props not working

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 --

https://codepen.io/jerryji/pen/yGOrbj?editors=1011

Any pointer will be much appreciated!

Upvotes: 4

Views: 522

Answers (1)

tony19
tony19

Reputation: 138206

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>

demo

Upvotes: 5

Related Questions