assign an ID in each object of array - vue.js

Question

I have a use case whereby sequential numbers need to be displayed in a table of data in the UI of an app, beginning at 1. The app is built using Vue and Buefy for the UI component library. Here is a screenshot of some sample data in such a table:
This needs to have a third column added and should display 1 in the first row and 2 in the second row.
I looked in the Buefy docs to see if their table component has built-in capability to do this but didn't see anything that fit. If that is the case, the data passed to the table component will need to provide it.
Since the format of the data passed to the table component is an array of objects I was thinking there might be a way to use each object's index, incremented by 1, for this purpose. But I'm not sure how to get this:
const data = [
{ color: 'blue', size: 'large', height: 'tall' },
{ color: 'green', size: 'medium', height: 'short' },
{ color: 'purple', size: 'small', height: 'average' }
];
to be this:
const data = [
{ id: '1', color: 'blue', size: 'large', height: 'tall' },
{ id: '2', color: 'green', size: 'medium', height: 'short' },
{ id: '3', color: 'purple', size: 'small', height: 'average' }
];
I tried the following but it does not give the desired outcome:
console.log([...data, ...Object.keys(data)];
How can the desired end result be achieved? I'm looking for a simple approach, if possible.
Also, I was concerned about what happens if an element gets removed from the original array of objects...would that mess up the sequential numbering that's based on the index number? I tested that situation by executing data.splice(0,1); but examining the results in the console, the objects appear to get re-indexed and therefore it shouldn't be an issue. Unless someone knows otherwise.

Answer 1

If I understood you correctly try with index:
new Vue({
el: '#demo',
data() {
return {
items: [
{ color: 'blue', size: 'large', height: 'tall' },
{ color: 'green', size: 'medium', height: 'short' },
{ color: 'purple', size: 'small', height: 'average' }
]
}
},
methods: {
del(i) {
this.items.splice(i, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div v-for="(item, i) in items" :key="i">
<div>{{ i+1 }} - {{ item.color }}</div>
<button #click="del(i)">delete</button>
</div>
</div>