Méthode pour extraire l'ID de ligne de la table Bootstrap Vue.js et collecter les attributs de données

Question

J'utilise une table Vue.js Bootstrap et je souhaite pouvoir collecter l'identifiant de chaque ligne de la table dans une propriété de données de tableau ou d'objet.

Voici un exemple de modèle de table Bootstrap :

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

Alors, comment puis-je collecter les valeurs de row.item.id dans un tableau ou un objet afin de pouvoir utiliser ces données à d'autres fins ?

Answer 1

Vous pouvez stocker n'importe quelle propriété du tableau items dans un tableau séparé en itérant à l'aide de la méthode Array.map().

Par exemple :

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: []
  }
}

Puis dans le crochet monté :

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