Vue: declared props in component are undefined

Question

I've spent two days, trying to solve this issue by myself but couldn't get it to work. Basically I declared all my props in the parent component but for some reason they don't show up at all.

Component

let addFilter = {
    props: ['newFilterName'],
    template:  `<div class="row">
                    <div class="field-options">{{ newFilterName }}</div>
                </div>`,
};

Instance

let filterManager = new Vue({
    el: '#filter-manager',
    components: {
        'add-filter': addFilter
    },
    data: {
        newFilterName: 'Test1234'
    }
});

HTML

<div id="filter-manager" v-show="visible">
    <div class="body">
        <add-filter></add-filter>
     </div>
</div>

Justin Kahn · Accepted Answer · 2018-10-08 06:44:35Z

2

you need to pass the data from the parent to the component

<div id="filter-manager" v-show="visible">
    <div class="body">
        <add-filter :new-filter-name="newFilterName" ></add-filter>
     </div>
</div>

To be clear :new-filter-name is the property of the child component and the right side "newFilterName" is the data property you defined in the parent. Just naming them the same doesn't do anything. You need the assignment when you instantiate the component.

edited Oct 8, 2018 at 6:44

answered Oct 8, 2018 at 5:59

Justin Kahn

1,3492 gold badges12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ptree Over a year ago

Thanks for pointing that out. It does work now. Just one more humble ask maybe you could change your answer to <add-filter :new-filter-name="newFilterName" ></add-filter> so I can accepted.

ptree Over a year ago

Yes Justin, you are right :new-filter-name and :newFilterName both work.

Collectives™ on Stack Overflow

Vue: declared props in component are undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related