I've got a list of object that are sorted alphabetically.
<li class="list-item" v-for="item in sortedItems" :key="item.id">
{{ item.name }} (id = {{ item.id }})
</li>
When I create a new object the item.id will be 0, because I don't know what id the item will get in the database.
After saving the new new object to the database, I want to update the item.id.
My problem is that the key is set to the id :key="item.id", so that the key will change with the id. Changing the key will usually force a rerender and I don't want a rerender (because I don't want some animations to trigger).
My question is: Can you somehow change the key of an object such that Vue thinks it is still the same object?
A reproduction of my problem can be found here: https://codesandbox.io/s/musing-wind-6w2lcz?file=/src/App.vue