Приложение выглядит как список папок, внутри которых есть элементы. Кликая на папку, открывается список элементов.
И папка, и элементы это у меня отдельные компоненты.
И получается, что когда кликаешь на любой элемент или папку, другие папки об этом не знают. И получается ситуация, что открыто несколько папок и пока их все не прощелкаешь, они не закроются. Неудобно.
Но как сообщить всем компонентам папок, что был клик и пора их закрыть, я не могу придумать.
Немного кода для понимания:
//Контейнер который содержит папки
<div v-for="currentBk of bkFolder"
:key="currentBk.id"
>
<BkFolder v-if="currentBk.children"
:bkChildren = currentBk.children
:title = currentBk.title
:index = currentBk.index
>
</BkFolder>
<BkItem v-else
:currentBk = currentBk
>
</BkItem>
</div>
//*************** Вывод папок
<template>
<div>
<div v-if="index < 4"
v-on:click="setOpenFolder"
class="bk-folder">
{{ title }}
</div>
<BkOpenFolder
v-if="openFolder"
v-on:click="setOpenFolder"
:bkChildren = bkChildren
/>
</div>
</template>
//********** Раскрытая папка с вложенными элементами
<template>
<div
v-if="openFolder"
v-on:click="setCloseFolder"
>
<div class="title">
{{ title }}
</div>
<div
class="bk-open-folder"
>
<div v-for="currentBk of bkChildren"
:key="currentBk.id"
>
<BkFolder v-if="currentBk.children"
:bkFolder = currentBk.children
:title = currentBk.title
>
</BkFolder>
<BkItem v-else
:currentBk = currentBk
>
</BkItem>
</div>
</div>
</div>
</template>
