Я пишу приложение для управления сменной работой. Идея довольно проста: команда распределяется между группами. В этих группах есть конкретные сдвиги. Я хочу получить что-то подобное:
Группа 1
- shift11
- shift12
- shift13
Группа 2
- shift21
- shift22
- shift23
Я уже сделал пару тестов, но на самом деле ничего не работает, как мне хотелось бы: все реактивное и динамичное.
Я использую vue.js, firestore (и между ними vuefire).
Я создал коллекцию «shiftGroup» с документами (с автоматическими идентификаторами), имеющими поля «name» и «order» (для изменения порядка отображения), и другую коллекцию «shift» с документами (все еще автоматически идентифицирующими), имеющими поля «name» "," order "(снова для изменения порядка отображения внутри группы) и" group "(идентификатор соответствующей shiftGroup.)
Я также пытался с firestore.References смен в группах, именно тогда я был ближе всего к моей цели, но затем я застрял, когда пытался сортировать смены внутри групп.
В любом случае, с помощью 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(
Но первый аргумент должен быть строкой, тогда как мне нужно работать с динамическими данными.
Если бы кто-нибудь мог предложить мне способ получить то, что я описал.
Спасибо всем большое