Passing Object as props does not work

Hello,
I have a JSON-Object and I want to pass it to a child component, however this does not work, the prop is undefined
I can iterate through the Object in the parent component, but if I try to pass the whole object “cherry” to the child component nothing happens:

What can be the problem? Thanks a lot!
Here is the code:

  <div v-for="section in cherry[0].sections" :key="section.id">
    <div class="accordion d-flex" :id="section.id">
      <span>{{ section.label }}</span>

    </div>
     <cherry-pick :cherryObject="cherry" :section="section.id"></cherry-pick>     
  </div>`


 app.component('cherry-pick', {

         props: ['section','cherryObject'],

         created() {

            console.log(this.cherryObject);

         }});

this.cherryObject (cherry-pick) is undefined

Finally I want to pass cherry[1].cpicks, but cherry alone should also work, and the JSON objects exists and is valid since the first v-for loop works perfectly fine!

Thanks!

Amaybe a matter of casing?

1 Like

Share your full code

Ok, I have the object in props now:

   console.log(this.cherry_object);
            console.log(this.section);

displays:

now

@iago to pass an object you need to use v-bind so your codes may like this

<cherry-pick v-bind:cherryObject="cherry" v-bind:section="section"></cherry-pick>

“:” is just the shorthand of “v-bind”. Also Iago’s original issue was that he couldn’t pass an object as a prop then his last comment is “Ok, I have the object in props now:” So that would mean this is resolved no?