Доступ к свойствам компонента vue внутри дочерних узлов HTML

Question

Я использую библиотеку для аккордеонов для Vue, и мне не удается найти способ доступа к свойствам родительского компонента для атрибута дочернего узла HTML.

Однако я не думаю, что это связано с библиотекой, просто мой недостаток опыта в Vue. Я думаю, мой вопрос был бы идентичен более простому коду:

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

Вот пример из реальной жизни:

• скрыть кнопку удаления, расположенную в заголовке, когда обертка свернута (обведено синим цветом)
• показать, когда обертка открыта

Компонент библиотеки v-collapse-wrapper предоставляет логическое свойство status, которое при раскрытии составляет true, при свертывании false.

Вот код, который я должен описать для аккордеона (язык мопса):

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

Что я пробовал:

• Использование $refs, но, похоже, это не работает должным образом (не реагирует)

Answer 1

Полагаю, один из способов сделать это - создать компонент, который обернет все содержимое v-collapse-wrapper, и этот компонент будет иметь свое собственное свойство status (к которому затем можно получить доступ в любом месте его шаблона).

Однако я чувствую, что это не стоит того, и может быть более простое решение.