PrimeVue editingRows

Question

I was hoping someone could help me with PrimeVue DataTable editing mode. On the docs for the DataTable it is stated that

Row Editing is defined by setting cellEdit as "row", defining editingRows with the v-model directive to hold the reference to the editing rows and adding a row editor column to provide the editing controls. Note that since editingRows is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row editing.

Does anyone have a working example on how I could use the editingRows to programmatically toggle editing in the newly added row? I tried updating this variable by pushing the values of the new row into editingRows array but this did not change anything on the page (I tried using nextTick), just meant that when I then manually triggered the row edit I had to cancel it twice to empty the array.

Answer 1

For anyone struggling with the same issue, turns out that the solution was quite simple and required direct re-assignment to this.editingRows - I previously tried adding a new value to it by using push.

Here's how I did it (while keeping rows - which were in edit mode - in editing mode):

this.editingRows = [...this.editingRows, this.newRow]