vue - Bootstrap-vue: Select row (primary-key) based on an object with the same key values

Question

how can I select each rows with the same values from a separate object?

<b-table
:items="CurrentObject"
:select-mode="selectMode"
ref="selectableTable"
selectable
@row-selected="onRowSelected"
primary-key="uniqueID"
>

CurrentObject:

[
{name: 'A', uniqueID: 123, text: 'lorem ipsum'},
{name: 'B', uniqueID: 456, text: 'lorem ipsum'},
{name: 'C', uniqueID: 789, text: 'lorem ipsum'},
]

Separate Object:

[
{uniqueID: 123},
{uniqueID: 456},
{uniqueID: 789},
]

Answer 1

Using JavaScript's array.findIndex() and VueBootstrap's selectRow() seem to do it.

Template:

<template> 
  <b-container>
    <div>
      <h1>Current Object</h1>
      <b-table
      :items="currentObject"
      :select-mode="selectMode"
      ref="selectableTable"
      selectable
      @row-selected="onRowSelected"
      primary-key="uniqueID"
      >
      </b-table>
      <h2>Separate Object</h2>
      <div v-for='object in separateObject' @click='selectMyRow(object.uniqueID);'>{{ object.uniqueID }}</div>
    </div>
  </b-container>
</template>

Script:

<script lang="ts">
import { Vue } from 'vue-property-decorator';

export default class HelloWorld extends Vue {

  selectMode = 'single';

  currentObject = [
    {name: 'A', uniqueID: 123, text: 'lorem ipsum'},
    {name: 'B', uniqueID: 456, text: 'lorem ipsum'},
    {name: 'C', uniqueID: 789, text: 'lorem ipsum'},
  ];

  separateObject = [
    {uniqueID: 123},
    {uniqueID: 456},
    {uniqueID: 789},
  ];

  selectMyRow(uniqueID) {
    const row = this.currentObject.findIndex(x => x.uniqueID === uniqueID);
    this.$refs.selectableTable.selectRow(row);
  }

  onRowSelected() {
    // do something else
  }
}
</script>

Working example:

If instead, you need similar functionality using select-mode multi, use the following:

selectMode = 'multi';
...

  selectMyRow(uniqueID) {
    const row = this.currentObject.findIndex(x => x.uniqueID === uniqueID);
    const table = this.$refs.selectableTable
    if (table.isRowSelected(row)) {
      table.unselectRow(row);
    } else {
      table.selectRow(row);
    }
  }