How to access child property in Vue js

Question

topmenu/script.js

module.exports = {
    components: {
        'topmenuSearch': require('vue').extend(require('./topmenu-search/component.vue'))
    }
}

/topmenu/template.html

<div class="search-overlay" v-if="topmenuSearch.searching"></div>

/topmenu/topmenu-search/script.js

module.exports = {
    data: function(){
        return {
            results: [],
            searchValue: '',
            searching: false
        }
    }
}

In console I get

build.js:3008 [Vue warn]: Error when evaluating expression "topmenuSearch.searching": TypeError: Cannot read property 'searching' of undefined (found in component: <topmenu>)

How can I access the topmenuSearch child so I can do this thing?

Jeff · Accepted Answer · 2016-04-21 12:43:42Z

1

Are you using Vueify? I'm a bit confused by how you are organizing your files here. https://github.com/vuejs/vueify

What we need to see is your templates. It looks like you have a topmenu component and a topmenu-search component, so the template for topmenu should look something like this:

<template>
  <div>
    <topmenu-search></topmenu-search>
  </div>
</template>

Just because you declare the component doesn't mean it exists. Adding it to your template creates the element. Then you can use v-ref to access it's data inside topmenu:

<topmenu-search v-ref:search></topmenu-search>
<div class="search-overlay" v-if="$refs.search.searching"></div>

answered Apr 21, 2016 at 12:43

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

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

Collectives™ on Stack Overflow

How to access child property in Vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related