Method to extract Vue.js Bootstrap table row ID and collect data attributes

Question

I'm using a Vue.js Bootstrap table and I want to be able to collect the id of each table row into an array or object data property.

This is an example of a Bootstrap table template:

<template v-slot:cell(label)="row" >
        <div >
          <div class="label"></div>
        </div>
      </template>

So, how do I collect the values ​​of row.item.id into an array or object so that I can use this data for other purposes?

Answer 1

You can store any property in the items array into a separate array by iterating using the Array.map() method.

For example:

data() {
  return {
    items: [
      { id: 1, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { id: 2, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
      { id: 3, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { id: 4, age: 38, first_name: 'Jami', last_name: 'Carney' }
    ],
    itemsID: []
  }
}

Then in the mounted hook:

mounted() {
    this.itemsID = this.items.map(({id}) => id)
}