Vue.js Bootstrap table - How to extract IDs of table rows and collect them in a data property

Question

I'm using Vue.js Bootstrap table and I would like to be able to collect each table row id in an Array or Object data property.

Here is an example of a bootstrap table template:

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

So, how can I collect row.item.id values in an Array or in an Object in order to use this data for other purposes?

As you are binding the data to the bootstrap table. You can simply get the id's from each object by using Array.map() method from the source data object itself. — Rohìt Jíndal
– Rohìt Jíndal, Commented Jul 13, 2023 at 6:40

Rohìt Jíndal · Accepted Answer · 2023-07-13 06:46:50Z

1

You can simply store any property from the items array into a separate array by iterating using 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 mounted hook :

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

answered Jul 13, 2023 at 6:46

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moritz Ringler Over a year ago

I would recommend using a computed property, it is usually more robust than a one-time call in a lifecycle hook

Rohìt Jíndal Over a year ago

@MoritzRingler Yeah that will also work, I just gave a suggestion to achieve that. At the end it depends on PO how they want to utilize this.

Collectives™ on Stack Overflow

Vue.js Bootstrap table - How to extract IDs of table rows and collect them in a data property

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related