Custom attribute name without value - Vue.js

Question

I am using Bootstrap-Vue Accordions in my project, and I want to dynamically render a loop of accordions. The problem is that it has an attribute v-b-toggle.accordionName, which has no value (or this is what I think).

I need to find a way to bind this attribute's 'name' dynamically.

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

I tried to use v-b-toggle.seminar.name, but clearly failed. Also tried to use v-bind="toggle", and have a data of toggle={'v-b-toggle.seminarOne': true}, but also failed.

Finally, I know it can be done using custom directives, but I am looking for another local way, if possible.

Thanks.

Efrat Levitan · Accepted Answer · 2019-03-15 11:15:22Z

the v-b-toggle attribute is already dynamic. you can simply use it like this:

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/[email protected]/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/[email protected]/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/

Collectives™ on Stack Overflow

Custom attribute name without value - Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related