有没有办法绑定可变数量的查询？答案

【问题标题】：Is there a way to bind a variable number of queries?有没有办法绑定可变数量的查询？
【发布时间】：2019-07-01 12:08:46
【问题描述】：

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

第 1 组
- 班次11
- 班次12
- 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(

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

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

非常感谢大家

【问题讨论】：

获得什么？这个不清楚。

标签： vue.js google-cloud-firestore nested-queries dynamic-binding vuefire

【解决方案1】：

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

我想出的解决方案是基于查看shared.ts 中的walkGet 代码。基本上，您在调用$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's reactivity 有关，但我不确定。

【讨论】：