0

我正在编写一个用于管理轮班工作的应用程序。这个想法很简单：团队在组之间共享。在这些群体中是特定的转变。我想得到这样的东西：

组 1
- shift11
- shift12
- shift13

第 2 组
- shift21
- shift22
- shift23

我已经进行了一些测试，但没有什么能像我希望的那样真正起作用：一切都是反应性的和动态的。

我正在使用 vue.js、firestore（以及它们之间的 vuefire）。

我创建了一个集合“shiftGroup”，其中包含具有字段“名称”和“顺序”（以重新排列显示顺序）的文档（具有自动 ID）和另一个集合“移位”，其中包含具有字段“名称”的文档（仍然是自动 ID），“ order”（再次重新排列显示顺序，组内）和“group”（对应 shiftGroup 的 ID。）

我也尝试过使用 firestore.References of shifts in groups，那是我最接近我的目标的时候，但是当我试图对组内的班次进行排序时，我被卡住了。

无论如何，使用 vuefire，我可以像这样轻松绑定 shiftGroup：

{
    data () {
        return {
            shiftGroup: [],    // to initialize
        }
    },
    firestore () {
        return {
            shiftGroup: db.collection('shiftGroup').orderBy('order'),
        }
    },
}

然后像这样显示组：

<ul>
    <li v-for="(group, idx) in shiftGroup" :key="idx">{{group.name}}</li>
</ul>

所以现在是时候添加班次了……我想我可以为每个组得到一个反应性的班次数组，就像这样：

{
    db.collection('shift').where('group', '==', group.id).orderBy('order').onSnapshot((querySnapshot) => {
        this.shiftCollections[group.id] = [];
        querySnapshot.forEach((doc) => {
            this.shiftCollections[group.id].push(doc.data());
        });
    });
}

然后我会像这样调用正确的列表：

<ul>
    <li v-for="(group, idx) in shiftGroup" :key="idx">
        {{group.name}}
        <ul>
            <li v-for="(shift, idx2) in shiftCollections[group.id]" :key="idx1+idx2">{{shift.name}}</li>
        </ul>
    </li>
</ul>

这是非常糟糕的代码，实际上，我越想它，我就越认为它是不可能实现的。当然，我想过使用官方文档中解释的编程绑定：

this.$bind('documents', documents.where('creator', '==', this.id)).then(

但是第一个参数必须是一个字符串，而我需要使用动态数据。

如果有人可以建议我获得我所描述的内容的方法。

非常感谢大家

4

1 回答 1

0

所以我意识到这是一个老问题，但它也是我正在开发的应用程序的重要用例。也就是说，我想要一个具有任意数量键的对象，每个键都绑定到一个 Firestore 文档。

我想出的解决方案是基于walkGet查看shared.ts. 基本上，您.在调用$bind. 每个点将引用一个嵌套属性。例如，绑定到docs.123将绑定到docs['123']. 因此，以下内容应该可以工作

export default {
    name: "component",
    data: function () {
        return {
            docs: {},
            indices: [],
        }
    },
    watch: {
        indices: function (value) {
            value.forEach(idx => this.$bind(`docs.${idx}`, db.doc(idx)))
        }
    }
}

在此示例中，docs对象具有绑定到 Firestore 文档的键，并且反应性有效。

我正在尝试解决的一个问题是，indices如果任何文档发生更改，您是否也可以观看以获取更新。现在，我观察到对 Firestore 文档的更改不会触发对indices. 我认为这与Vue 的反应性有关，但我不确定。

于 2020-01-28T21:56:05.253 回答