I’m working on a project with lists in which rows have editable values, which cause the order of the rows in the list to be updated after editing. The rendering works fine, rows end up in the right place.
To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique
keyattribute for each item
keyspecial attribute is primarily used as a hint for Vue’s virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed/destroyed.
My problem is, that while the index on the rendered objects is correct (because it’s consistent with the id to which the index belongs) when using an unique value for the keys, the $children order of the parent (list) is not. This behaviour of $children (non-reactive) is as stated in the docs.
The direct child components of the current instance. Note there’s no order guarantee for
$children, and it is not reactive. If you find yourself trying to use
$childrenfor data binding, consider using an Array and
v-forto generate child components, and use the Array as the source of truth.
An obvious solution would be to add a property to the data (source of truth), to let the row know it’s selected. This ‘selected’-state however is not a property of the data, since it’s only selected in a specific list (not in other views). This kind of feels like polluting my source of truth. I don’t know another way to lookup a VNode created by a v-for directive aside from looping/filtering through the DOM nodes ($children) comparing the selected index to the index that belongs to the VNode. Filtering through the rows until the correct row is found based on a property, seems pretty resource intensive, especially since the edits will be frequent with a high number of rows.
Are a new data property to keep track of the selected row in my data or using filter() to loop through all of the rows my only options, or is there something I’m overlooking?