Question

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

第1组
-shift11
-shift12
-shift13

第2组
-shift21
-shift22
-shift23

我已经进行了几次测试，但是没有什么能真正发挥我的作用：一切都是动态的和动态的。

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

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

我也尝试过使用firestore。这是我最接近目标的小组转变的参考，但是后来我试图对小组内部的转变进行分类时陷入困境。

无论如何，借助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(

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

如果有人可以建议我一种获取我所描述的方法的话。

非常感谢大家

Answer 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有关，但不确定。

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

1 个答案: