x-editable does not use the HTML value of its underlying HTML element

[Doogiemuc]

I have a rather complex setup: I have a HTML/Bootstrab table. This table is filterable and sortable. This is implemented with a vuejs component.

Now I want single cells inside that table to be editable. Cells only contain plain simple text values. So when the user clicks an edit icon inside a cell, then I initialize an x-editable, show it and the user can edit that value.

But when I sort my table and then start editing the value, then the x-editable shows the OLD value that was in that cell before the table was sorted!!! Even althoug I am re-initializing the editable object, when the user starts to edit.

I think this might be related to the way vueJS handles cell updates. I think I read somehwere that it re-uses HTML elements. Could it be that x-editable gets confused with that.

I already tried to pass the initial value of the cell that I want to be edited via ...editable({value: this.myCellValue}) but that doesn't work! The editable popup still shows the old value of that cell after sorting.

Some basic questions:

• When I call $('#id1').editable(...) and $('#id').editable(...) does this then create two seperate independant instances of an x-editable?
• Can I check whether a given HTML element already has an editable attached to it?
• How does editable get its initial value?