In the context of Vue bootstrap, a b-table consists of a list with an unknown number of rows. The requirement is to display a remove button only if the email in the row matches that of the currently logged-in user. This functionality currently works for a single row.
<b-table
:items="selectedGrant.interested_agencies"
:fields="interestedAgenciesFields"
>
<template #cell(actions)="row">
<b-row v-if="loggedInUser.email === selectedGrant.interested_agencies[0]['user_email']">
<b-button variant="danger" class="mr-1" size="sm" @click="unmarkGrantAsInterested(row)">
<b-icon icon="trash-fill" aria-hidden="true"></b-icon>
</b-button>
</b-row>
</template>
</b-table>
The question arises on how to iterate through all rows within the table.
Simply using
selectedGrant.interested_agencies[row]['user_email']li lists and not specifically tailored for b-tables. Attempts were made to include a v-for in the template as well as another b-row, but there was no success.
An alternative attempt involved utilizing a computed method, however, it proved unsuccessful:
loop() {
let i;
let match;
for (i = 0; i < this.interestedAgenciesFields.length(); i += 1) {
if (this.loggedInUser.email === this.selectedGrant.interested_agencies[i].user_email) {
match = true;
} else {
match = false;
}
}
return match;
},
There's speculation whether implementing JavaScript's .find() method could be effective, yet experimentation yielded no positive results.
Is there a viable approach to iterate through a b-table, either within the template or through a computed method, in order to verify a specific value in every row? It should not be restricted to checking just one row.