CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Lazlo
Lazlo

Reputation: 8790

Pass data object from parent to child component

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?

Upvotes: 3

Views: 8436

Answers (1)

Bert
Bert

Reputation: 82489

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>

Upvotes: 8

Related Questions