CODEWITHSUNDEEP
vue.jsvuejs2
Vincent Mimoun-Prat
Vincent Mimoun-Prat

Reputation: 28541

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

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:

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

Here is the real life example though:

screenshot

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-group(:only-one-active="true")
    v-collapse-wrapper.collapsed(v-for="(item, id, index) in form.items")
        div.card
            div.card-header
                h5(v-collapse-toggle="")
                    small
                        span(class="fa fa-chevron-up fa-fw collapse-indicator")
                        .
                            {{ getCardTitle(item) }}
                        a(href="#"
                          class="btn btn-sm btn-danger float-right"
                          @click.prevent="removeItem(item)")
                            | Delete

What I tried:

Upvotes: 1

Views: 94

Answers (1)

Vincent Mimoun-Prat
Vincent Mimoun-Prat

Reputation: 28541

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.

Upvotes: 1

Related Questions