Button click event is sending the wrong props.index after insert new row in datatable component

Steps to reproduce

I have a datatable with some data and each row has a ‘view’ and a ‘delete’ button. I want to be able to add a new row to that table. So, to do that, I created a button that push some data to my datatable items array. After doing that, a new row is added and it is sorted the right way. But when I press the ‘view’ button of that new row, it shows me the content of previous the row in that same position.

Versions

0.16.6

What is expected ?

After pushing new content to datatable items array, the props.index that is sent as an argument to the click event button must be the right one.

What is actually happening ?

The props.index is wrong and shows the wrong row data.

Reproduction Link

https://codepen.io/tmmsmoreira/pen/YrBRBe

[johnleider]

The problem is that the index that comes back from the scoped slot does not directly correlate to the index of your locally scoped item array. When the data-table sorts, it doesn’t maintain the original array order, and has different indexes for the new sort.

You can observe this behavior by clicking the view button, resorting the table, and clicking the same position. It will display the same item because your local items array has not been mutated in the exact same manner as the table sort.

I’m attaching a different way to handle this, hopefully it can help you. https://codepen.io/johnjleider/pen/JrzYmE?editors=1111

[husayt]

Yes, indeed seems like current index is both useless and misleading. Would be great to a) rename current index to displayIndex b) add a new index to scope c) also clearly specify in docs what is each index is for.

meanwhile I will use this workaround to find index:

  @click="doAction(items.indexOf(item))"