How do I use a primary key in Bootstrap-table-vue? - vue.js

Question

How do I use a primary key in Bootstrap-Table-Vue? But the problem is that sometimes the id fields of the data are 0. I want automatic id assignment.
My Data:
items = [{id:0,name:'Ali'},
{id:1,name:'Veli'},
{id:2,name:'Berkay'},
{id:0,name:'Mehmet'},
]
<b-table
:items="filteredItems"
:fields="filteredFields"
primary-key="id"
/>

Answer 1

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>