Kaedah untuk mengekstrak ID baris jadual Vue.js Bootstrap dan mengumpul atribut data

Question

Saya menggunakan jadual Bootstrap Vue.js dan saya mahu dapat mengumpulkan id setiap baris jadual ke dalam tatasusunan atau harta data objek.

Berikut ialah contoh templat jadual Bootstrap:

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

Jadi, bagaimanakah cara saya mengumpul nilai row.item.id ke dalam tatasusunan atau objek supaya saya boleh menggunakan data ini untuk tujuan lain?

Answer 1

Anda boleh menyimpan sebarang harta dalam tatasusunan item ke dalam tatasusunan berasingan dengan mengulang menggunakan kaedah Array.map().

Contohnya:

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

Kemudian dalam cangkuk yang dipasang :

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