没有值的自定义属性名称 - Vue.js

Question

我在我的项目中使用 Bootstrap-Vue Accordions，我想动态渲染一个手风琴循环。问题是它有一个属性v-b-toggle.accordionName，没有值（或者我认为是这样的）

我需要找到一种方法来动态绑定此属性的 'name'。

<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}，也失败了。

最后，我知道可以使用自定义指令来完成，但如果可能的话，我正在寻找另一种本地方式。

谢谢。

Answer 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>

https://jsfiddle.net/aep6hqd1/3/

没有值的自定义属性名称 - Vue.js

Custom attribute name without value - Vue.js

vue.js

bootstrap-vue