CODEWITHSUNDEEP
htmlvuejs2
Pheonix
Pheonix

Reputation: 177

Display only particular toggle on multiple cards when clicked in VUEJS

I am working on this feature where i have multiple cards with a toggle inside it.

I am getting the values for the card from the api, and using the When i am trying to click on the toggle, the toggle on the cards opens where by i want to display the particular card toggle.

Here is the code for it:

<div v-for="values in api" :key="values.id">
<card>
   <li>
     <b-link v-b-toggle.collapse>
      {{ value.name }}
      </b-link>
      <b-collapse id="collapse">
      <pre>
         {{ value.address }}
      </pre>
      </b-collapse>
   </li>
</card>
<div>

Please assist

Upvotes: 0

Views: 312

Answers (1)

Beshambher Chaukhwan
Beshambher Chaukhwan

Reputation: 1448

The problem is with the same id attribute of the collapse. You need to change the id assignment. Try the code below:

<div v-for="values in api" :key="values.id">
 <card>
   <li>
     <b-link v-b-toggle="`collapse-${values.id}`">
      {{ value.name }}
      </b-link>
      <b-collapse :id="`collapse-${values.id}`">
      <pre>
         {{ value.address }}
      </pre>
      </b-collapse>
   </li>
 </card>
<div>

Upvotes: 1

Related Questions