简单的任务列表排序-如何将其保存到Firebase Firestore? [英] Simple task list ordering - how to save it to Firebase Firestore?

问题描述

我正在使用Firebase Firestore和Vue.js创建一个简单的任务列表Web应用程序.在我尝试执行任务重新排序功能之前，一切似乎都还不错，这使项目变成了一场噩梦.

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.

我可以使用基于著名的sortable.js库的Vue Draggable库在应用程序端轻松实现重新排序功能.基本上，我有一个v-for代码，可以遍历我的任务，就像这样:

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.

到目前为止，一切都很好，但是现在我正尝试将这种重新排序与Firebase Firestore同步，但是，即使它允许我将元素推送或删除到存储阵列中(

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.

我应该如何处理?

推荐答案

如果您要按 arrayUnion 或 arrayRemove不支持的方式按索引修改Firestore列表字段元素，您将必须:

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. 阅读文档
2. 修改内存中的数组字段
3. 使用新的数组内容将字段更新回文档

这篇关于简单的任务列表排序-如何将其保存到Firebase Firestore?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！