[Vuejs]-How do I use a primary key in Bootstrap-table-vue?

by

0👍

✅

In that case, you can iterate the items array and add primaryKey property in each object which will contain the index.

const items = [
  {id:0, name:'Ali'},
  {id:1, name:'Veli'},
  {id:2, name:'Berkay'},
  {id:0, name:'Mehmet'}
];

items.forEach((obj, index) => {
  obj['primaryKey'] = index
});

console.log(items);

Working demo with b-data-table :

new Vue({
  el: '#app',
  data: {
    items: [
      {id:0,name:'Ali'},
      {id:1,name:'Veli'},
      {id:2,name:'Berkay'},
      {id:0,name:'Mehmet'}
    ],
    fields: [
      {
        key: 'name',
        label: 'Name'
      }
    ],
  },
  mounted() {
    this.items.forEach((obj, index) => {
      obj['primaryKey'] = index
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.common.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css"/>
<div id="app">
    <b-table class="mt-4" :items="items" :fields="fields" primary-key="primaryKey"/>
</div>

Leave a comment