Loop through Vue b-table rows

user_10239387 0
Viewed 114

In Vue bootstrap, a b-table has a list (unknown length) of rows. A remove button should only appear if the email in the row matches the email of the current logged in user. This currently works if it is only checking one 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>

How would I loop through all of the rows in the table?

Simply putting selectedGrant.interested_agencies[row]['user_email'] does not go through each individual row. Most of what I have found for looping is for li lists and not the b-table. I have also tried incorporating a v-for in the template and another b-row, to no avail.

I have also tried a computing method in its place, but it did not work:

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;
 },

Maybe it is something with javascript .find() method that could work? Again, I have enot found success with it.

Is there some way to loop through a b-table, whether it is inline of in a computing method, to check a specific value in each row? It should not be only checking one row.

bootstrap-vue vue.js loops javascript
1 Answers

You don't need to loop through all (or currently displayed) rows in the condition.
You're already inside the rows loop, because you're using a #cell({key}) slot. What you probably want is to compare the current row's user_email to loggedInUser.email:

<template #cell(actions)="row">
  <b-row v-if="loggedInUser.email === row.item.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>

Docs here.

What's going on?
#cell(actions)="row" is a #cell{{key}} slot (where {key} is actions). If you press Show scope button in the docs, you'll be able to inspect the slot's structure (you named the slot row in your template - so you're looking at row's structure). You likely want to use its item property, which is, actually, the raw data of current row, as an object.

You want to display the contents of actions cell on rows where row.item.user_email is equal to loggedInUser.email.

That's it.

user_18916770
Related