我在我的项目中使用 Bootstrap-Vue Accordion ,并且我想动态渲染 Accordion 循环。
问题是它有一个属性 v-b-toggle.accordionName
,该属性没有值(或者这就是我的想法)。
我需要找到一种方法来动态绑定(bind)此属性的“名称”。
<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}
,但也失败了。
最后,我知道可以使用自定义指令来完成,但如果可能的话,我正在寻找另一种本地方法。
谢谢。
最佳答案
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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c6760676172633e65667653213d233d233e61703d2227" rel="noreferrer noopener nofollow">[email protected]</a>/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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2924243f383f392a3b663d3e2e0b79657b657b663928657a7f" rel="noreferrer noopener nofollow">[email protected]</a>/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>
关于vue.js - 没有值的自定义属性名称 - Vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55159823/