Как свернуть / развернуть несколько динамических сворачиваний родительского компонента с помощью Bootstrap-Vue?

В родительском компоненте у меня есть следующее:

<b-col cols="2">
    <b-btn v-b-toggle.collapse0.collapse1 variant="secondary" size="sm"><i class="fas fa-bars"></i></b-btn>
</b-col>

collapse0 и collapse1 в настоящее время жестко запрограммированы идентификаторами коллапсов, которые я генерирую динамически в дочернем компоненте следующим образом:

<b-collapse :id="'collapse' + index" class="mt-2">

У каждого из них есть своя собственная кнопка сворачивания / разворачивания, например:

<b-btn v-b-toggle="'collapse' + index" variant="secondary" size="sm"><i class="fas fa-bars"></i></b-btn>

Я не вижу никаких задокументированных способов динамического выполнения множественного развертывания / свертывания. Я возился с v-b-toggle = "[collapse0, collapse1]" и другими вариантами, но не нашел способа добиться этого.

Я также попытался, чтобы родительская кнопка просто обновляла переменную данных, которую я отправляю в качестве опоры для дочернего компонента. Этот подход, казалось, продвинул меня немного дальше, за исключением того, что в этом случае, насколько я понимаю, мне нужно сделать v-model = "{здесь некоторая переменная данных}", чтобы изменить состояние коллапса. Таким образом, я могу получить опору, изначально установить для нее переменную, и это работает изначально, но не реагирует на изменение опоры без наблюдателя, что мне показалось излишне сложным. Я также не уверен, как этот подход будет взаимодействовать с кнопками переключения на отдельных коллапсах и как это должно взаимодействовать с родительскими кнопками.

Я просмотрел это решение, но еще не смог понять, как это реализовать, тем более что у меня нет дочернего компонента, объявленного в родительском объекте compoment.

Итак, первая часть вопроса здесь - есть ли способ динамически передавать несколько идентификаторов коллапса элементу v-b-toggle?

Если нет, есть ли способ реализовать решение refs без заполнения объекта компонентов?

И, если эти три не удастся, есть ли у кого-нибудь пример того, как они успешно это сделали, используя сценарий типа родительская переменная / дочерняя опора / дочерняя переменная?

Заранее спасибо!


vue.js bootstrap-vue
person llhilton    schedule 01.08.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У меня была такая же проблема, и я сделал это, поставив динамическую ссылку на b-collapse:

v-for = "(период, индекс) в периодах" и: ref = "'период' + индекс" для каждого элемента b-свертывания (генерируется динамически)

а затем обращается к переменной show компонента:

        OpenAllCollapse() {
            for (var i = 0; i < this.periods.length; i++) {
                this.$refs["period" + i][0].$data.show = true
            }
        }
person Nehio    schedule 15.01.2019