0

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?

sigmaxf
  • 7,998
  • 15
  • 65
  • 125

1 Answers1

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:

  1. Read the document
  2. Modify the the array field in memory
  3. Update the field back to the document with the new array contents
Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
  • I thought of this, but this array will eventually have 30-50kb of data and will change often. Sending the full array every time, even for small changes, seems too much. – sigmaxf Jun 12 '20 at 22:21
  • You don't have any option other then to use individual documents in a subcollection, which might be worse to manage. Or store a list of IDs that correspond to items elsewhere. – Doug Stevenson Jun 12 '20 at 22:25
  • Yes, I also thought of the list of IDs, I'm just thinking it might be an even worse nightmare to keep sync. – sigmaxf Jun 12 '20 at 22:30
  • Tens of kilobytes is not that much data really. – Doug Stevenson Jun 12 '20 at 22:31