Accessing a vue component's properties inside the child HTML nodes

4236 views vue.js

I am using a library for accordions for Vue and I cannot manage to find the way to access the properties of a parent component for a child HTML node attribute.

However, I do not think this is related to the library, just my lack of experience in Vue. I guess my question would be identical with the more simple code:

        h1(v-show="//how to show/hide based on my-component.status"

Here is the real life example though:

  • hide the delete button located in the header when the wrapper is collapsed (circled in blue)
  • show it when the wrapper is open


The library component v-collapse-wrapper exposes a boolean property status which is true when expanded, false when collapsed.

Here is the code I have to describe the accordion (pug language):

    v-collapse-wrapper.collapsed(v-for="(item, id, index) in form.items")
                        span(class="fa fa-chevron-up fa-fw collapse-indicator")
                            {{ getCardTitle(item) }}
                          class="btn btn-sm btn-danger float-right"
                            | Delete

What I tried:

  • Using $refs, but that does not seem to work properly (not reactive)

answered question

1 Answer


I guess one way to do it would be to make a component which would wrap the whole v-collapse-wrapper content and have that component expose its own status property (which could then be accessed anywhere in its template).

However I feel this may not be worth it and there may be a simpler solution.

posted this

Have an answer?


Please login first before posting an answer.