提取Vue.js Bootstrap表格行ID並收集到資料屬性的方法

Question

我正在使用Vue.js Bootstrap表格，我希望能夠將每個表格行的id收集到一個陣列或物件資料屬性中。

這是一個Bootstrap表格範本的範例：

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

那麼，我該如何將row.item.id的值收集到一個陣列或物件中，以便將這些資料用於其他目的？

Answer 1

您可以透過使用Array.map()方法迭代，將items數組中的任何屬性儲存到一個單獨的陣列中。

例如：

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

然後在mounted鉤子中：

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