Recently, I came across some vue code that utilizes vue-tables-2. The table in question is quite simple and looks like this...
<v-client-table :data="myRows" :columns="columns" :options="options">
<div slot="columnA" slot-scope="{row}">
<input type="text" v-model.trim="row.someKey" class="form-control">
</div>
<div slot="etc"> ...
One thing that caught my attention was the slot-scope="{row}", rather than just slot-scope="row". Upon inspecting the rows, I found that each row had a structure like this...
{ row: { keyA: value, keyB: value, etc }, index: 1 },
{ row: { keyA: value, keyB: value, etc }, index: 2 }, etc
It seems like the original developer "destructured" the row object to save on typing, hence the use of
v-model.trim="row.row.someKey"Now, I'm tasked with adding a new column that requires both the row data and the array index of that particular row, as shown below...
<div slot="columnZ" slot-scope="row">
<p>col value is {{row.row.someOtherKey}} and index is {{row.index-1}}<p>
</div>
However, I find using row.row no more convenient than the initial setup, and the row.index provided starts from 1 instead of the usual zero-based array indexing.
My assumption is that these issues stem from vue-tables-2. Is there a way to work around these limitations while still utilizing the package? Specifically, can I access the row data without the extra layer of "row", and is there a method to obtain a zero-based array index for each row?