#vue.js #bootstrap-vue
#vue.js #bootstrap-vue
Вопрос:
Я использую аккордеоны Bootstrap-Vue в своем проекте, и я хочу динамически отображать цикл аккордеонов. Проблема в том, что у него есть атрибут v-b-toggle.accordionName
, который не имеет значения (или это то, что я думаю).
Мне нужно найти способ динамически привязывать «имя» этого атрибута.
<b-card no-body v-for="seminar in seminars" :key="seminar.name">
<b-card-header role="tab">
<b-button block v-b-toggle.( ?? )>{{seminar.title}}</b-button>
</b-card-header>
<b-collapse :id="seminar.name" role="tabpanel">
<b-card-body>
Hey there!
</b-card-body>
</b-collapse>
</b-card>
Я пытался использовать v-b-toggle.seminar.name
, но явно потерпел неудачу.
Также пытался использовать v-bind=»toggle» и получить данные toggle={'v-b-toggle.seminarOne': true}
, но также потерпел неудачу.
Наконец, я знаю, что это можно сделать с помощью пользовательских директив, но я ищу другой локальный способ, если это возможно.
Спасибо.
Ответ №1:
v-b-toggle
атрибут уже является динамическим. вы можете просто использовать его следующим образом:
new Vue({
el: '#app',
data:{
seminars:[
{
title:'seminar1',
name:'seminar1',
},
{
title:'seminar2',
name:'seminar2',
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.14/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.14/dist/bootstrap-vue.js"></script>
<div id="app">
<b-card no-body v-for="seminar in seminars" :key="seminar.name">
<b-card-header role="tab">
<b-button block v-b-toggle="seminar.name">{{seminar.title}}</b-button>
</b-card-header>
<b-collapse :id="seminar.name" role="tabpanel">
<b-card-body>
Hey there! i am {{seminar.name}}
</b-card-body>
</b-collapse>
</b-card>
</div>