CODEWITHSUNDEEP
vue.jsvue-good-table
Greg Fielding
Greg Fielding

Reputation: 557

Vue Good Table how to access data in Selected Row Actions

I'm trying to use the checkbox in vue-good-table to select rows, then a button in the selected row action slow to perform a function on the selected rows. How can I access the data?

https://xaksis.github.io/vue-good-table/guide/advanced/checkbox-table.html#selected-row-action-slot

This doesn't work:

<vue-good-table
                @on-selected-rows-change="selectAll"
                :columns="columns2"
                id="shift.id"
                :ref="shift.id"
                :rows="orderedPlacedUsers(shift)"
                 :select-options="{
                  enabled: true,
                  selectOnCheckboxOnly: true,
                }"
                >
                <div slot="selected-row-actions">
                  <button class="btn btn__small btn__flat" @click="lockAll(shift)">Lock All <i class="ml-2 fas fa-lock-alt"></i></button>
                </div>
                </div>
</vue-good-table>

Then

data() {
  return {
   columns2: [
    {
      label: '',
      field: 'extras',
      tdClass: 'text-center',
      sortable: false,
    },
    {
      label: 'Name',
      field: 'fullName',
    },
    {
      label: 'Signed Up',
      field: 'created',
      sortable: false,
    },
    {
      label: 'Job',
      field: 'requestedJob.title',
      tdClass: 'text-center',
    },
    {
      label: '',
      field: 'notes',
      sortable: false,
      tdClass: 'text-center',
    },
    {
      label: '',
      field: 'reservations',
      tdClass: 'text-center',
      tdClass: 'text-center',
      sortable: false,
    },
    
    {
      label: '',
      field: 'delete',
      tdClass: 'text-center',
      sortable: false,
    },
  ]
  }
}



methods: {
 lockAll(shift) {
   console.log(shift.id)
   console.log(this.$refs[shift.id].selectedRows)
 },
orderedPlacedUsers (shift) {
  function compare(a, b) {
    if (a.firstName < b.firstName)
      return -1;
    if (a.firstName > b.firstName)
      return 1;
    return 0;
  }
  return this.filteredPlacedUsers.sort(compare).filter(user => {
    return user.shift == shift.id && user.day == shift.day
  });
},
}

The shift is "shift in eventShifts"... here's what that looks like: {"day":"2021-08-27","endTime":null,"payrollComplete":true,"startTime":"14:00","event":"Los Bukis","id":"dvaBm5wQXMXvVCGBSK8e","exportedCont":{"seconds":1631208172,"nanoseconds":886000000},"collapse":false,"position":{"title":null},"selectedStaff":null,"eventId":"CGHMVzcKPnNLsmRxoeVj","exportedEmp":{"seconds":1631208185,"nanoseconds":622000000},"name":"Line Cook","staff":"50"}

Thank you!

Upvotes: 0

Views: 3959

Answers (1)

cafertayyar
cafertayyar

Reputation: 1072

To access the vue-good-table via this.$refs you need to add :ref property into vue-good-table.

<vue-good-table
   :id="shift.id"
   :ref="shift.id"
>
</vue-good-table>

But there is another thing to be considered, it says here that

When used on elements/components with v-for, the registered reference will be an Array containing DOM nodes or component instances.

In your case, probably vue-good-table is used on an element/component with v-for. So, you can access it via this.$refs[shift.id][0]. Finally, you can print the selectedRows using console.log(this.$refs[shift.id][0].selectedRows)

Upvotes: 2

Related Questions