0

I have used bootstrap-vue to create buttons inside a table. Requirement was to get the data of the button that was clicked. But since I used a for loop, even though i click on any of the 3 buttons (number is based on for loop), the data is getting rendered for all the 3 buttons on clickon any of the 3 buttons. I tried using "collapse-{{index}}" so that the index value might change. But if use this I am getting module error.

<b-tbody>
          <b-tr v-for="(_,index) in gradableItems" :key="index">
            <b-td>
              <div>
                <b-button
                  :class="visible ? null : 'collapsed'"
                  :aria-expanded="visible ? 'true' : 'false'"
                  aria-controls="collapse-4"
                  @click="fetchGIChildren({gradableItemId:gradableItems[index].id+'',userID:'701709', giIndex: index}), visible = !visible"
                ></b-button>
              </div>
              {{gradableItems[index].id+" "+gradableItems[index].name}}
              <table>
                <b-collapse id="collapse-4" v-model="visible" class="mt-2">
                  <tr v-for="(_,childIndex) in gradableItems[index].children" :key="childIndex">
                    <td>{{gradableItems[index].children[childIndex].status +' '+ gradableItems[index].children[childIndex].name}}</td>
                  </tr>
                </b-collapse>
              </table>
James Z
  • 12,209
  • 10
  • 24
  • 44
Rakesh R
  • 1
  • 2
  • can u plz add a pen for it? – Dcoder14 Apr 21 '20 at 19:32
  • You are binding all the collapses to the same v-model value, and then toggling that value in your click handler for each button. Since they are all bound to the same v-model, they will all open/close regardless of which button was clicked. – Troy Morehouse Apr 22 '20 at 01:28

0 Answers0