[Vuejs]-Use the prop pass a object, but did not get the value

by

0👍

✅

The follow that you have does not bind anything since you are not passing the prop name todo over to the child.

<child v-bind="todo"></child>

should be

<child v-bind:todo="todo"></child>

Alternatively, you can use the shorthand method like the one below

<child :todo="todo"></child>

By passing through the todo Object, you can now use {{ todo.text }} as you did in the child component.

This doc should help.

0👍

You bind a object to the component:

 <child v-bind="todo"></child>

and the object todo data is this:

todo: {
    text: 'Study English',
    isComplete: false
}

it is equals to:

 <child v-bind:text='Study English' v-bind:isComplete=false ></child>

In your component, the prop should like this:

props: ['text', 'isComplete']

Otherwise you can pass the todo like this: v-bind:todo="todo".

Leave a comment