Pass data object from parent to child component

Question

I'm making a list of tools.

I'm trying to pass the full tool data object from the parent component (the tool list) to each child component (the tool items), using single file templates.

In the child component, I get this error:

Property or method "..." is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Where ... is any property of the tool data object, for example title or description.

Here's my setup:

Tools.vue (parent):

<template>
    <main id="tools">
        <tool v-for="tool in tools" :data="tool" :key="tool.id"></tool>
    </main>
</template>

<script>
    import Tool from './Tool.vue'

    let test = {
        id: 1,
        title: 'Title',
        description: 'Description'
    };

    export default {
        data() {
            return {
                tools: [
                    test
                ]
            }
        },

        components: {'tool': Tool}
    }
</script>

Tool.vue (child):

<template>
    <div class="tool">
        <div class="title">{{ title }}</div>
        <div class="description">{{ description }}</div>
    </div>
</template>

<script>
    export default {}
</script>

It should be simple, but I'm unable to find the solution with my google-fu. What am I missing here?

Declare props in child component, that child component is supossed to accept. — Belmin Bedak, Jul 25 '17 at 22:05
I'm aware I could do that. But is there any way to pass the full data object instead? — Lazlo, Jul 25 '17 at 22:07
Yes It's possible, you can store `$data` in property ``but not sure is that good idea. — Belmin Bedak, Jul 25 '17 at 22:11

score 8 · Accepted Answer · answered Jul 25 '17 at 23:54

If you want to pass the entire tool object, first declare the property.

export default {
  props: ["tool"]
}

Then, pass it using your v-for.

<tool v-for="tool in tools" :tool="tool" :key="tool.id"></tool>

You can reference it in your child component's template using

<div class="title">{{ tool.title }}</div>
<div class="description">{{ tool.description }}</div>

Pass data object from parent to child component

1 Answers1

Linked