问题
I'm creating a simple task list web app using firebase firestore and Vue.js. All seem ok until I tried to do the task reordering feature, which turned the project into a nightmare.
I can easily implement reorder functionality on the app side by using the Vue Draggable library, that is based on the famous sortable.js library. Basically, I have a v-for code that iterates through my tasks, something like this:
<draggable v-model="tasks">
<div v-for="task in tasks" :key="task.id">{{task.title}}</div>
</draggable>
Note that this is wrapped with a draggable component that reorders the array whenever I drag elements, so that my tasks model array is dynamically reordered automatically.
All good so far, but now I'm trying to sync this reordering with Firebase Firestore, but, even though it allows me to push or remove elements into the storage array (https://firebase.google.com/docs/reference/js/firebase.firestore.FieldValue#static-arrayunion), it does not allow me to insert at specific indexes, so I can't save the reordering.
How should I approach this?
回答1:
If you want to modify Firestore list field elements by index in a way that's not supported by arrayUnion or arrayRemove, you will have to:
- Read the document
- Modify the the array field in memory
- Update the field back to the document with the new array contents
来源：https://stackoverflow.com/questions/62353170/simple-task-list-ordering-how-to-save-it-to-firebase-firestore