get specific element of an table

Question

hello every one I am trying to get a specific element in my table and add a class to it to make the red buttons green when an image is uploaded. But i can't get the specific row in my table. Any one a solution for this?

My code:

  <b-table hover
           :filter="filter"
           id="my-table"
           :bordered="bordered"
           :fields="fields"
           :items="items"
           :per-page="perPage"
           :current-page="currentPage"
           responsive
           striped
           small>
    <template v-slot:cell(actions)="row">
      <b-button id="btnImage" size="sm" @click="info(row.item, $event.target)" class="addModal mr-2" ref="addModal">
        <font-awesome-icon :icon="['fas', 'image' ]" />
      </b-button>
    </template>
  </b-table>

If i do this: var tr = document.getElementById("my-table").getElementsByTagName("tr"); I get the following output:

inside every tr is an element thats called innerText that reference to the id that you can see here in my table:

But how do i get the specific row in my table and add an class to the button of that specific row?

Answer 1

Use scoped field slots

<template v-slot:cell(nameage)="data">
        {{ data.item.name.first }} is {{ data.item.age }} years old
      </template>

Refer https://bootstrap-vue.org/docs/components/table#scoped-field-slots . I think it's well documented.

Answer 2

For every one that needs it. I fixed the problem to give row.item as a parameter to my method very simple but is works great