Извлечение данных из firebase перед монтированием () на Vue


Извлечение данных из firebase перед монтированием () на Vue

22.10.2020 04:09:54 Просмотров 37 Источник

Я пытаюсь извлечь данные из firebase перед вызовом mounted () hook, но запрос firebase-это асинхронная функция, и я изо всех сил пытаюсь справиться с ними. Вот мой фрагмент кода:

<template>
  <b-table-simple sticky-header="90%" class="table-bordered">
    <b-thead head-variant="dark">
      <b-tr>
        <b-th >氏名</b-th>
        <b-th v-for="date in printables" :key="date" class="text-center" v-html="date"></b-th>
      </b-tr>
    </b-thead>
    <b-tbody v-if="fetched">
      <template v-for="(staff_data, staff_id) in project.assigned_staff">
        <b-tr :key="staff_id">
          <b-th rowspan="6">
            <b-tr>
              <b-th rowspan="6" v-html="staff_data.name.split(/ | /).join('<br>')"></b-th>
              <b-th >[]</b-th>
            </b-tr>
            <b-tr>
              <b-th >出勤</b-th>
            </b-tr>
            <b-tr>
              <b-th >残業</b-th>
            </b-tr>
            <b-tr>
              <b-th >深夜</b-th>
            </b-tr>
            <b-tr>
              <b-th >内容</b-th>
            </b-tr>
            <b-tr>
              <b-th >弁当</b-th>
            </b-tr>
          </b-th>
          <b-td v-for="i in days.length" :key="i">
            <b-form-checkbox @change.native="setBGColor($event)" :ref="`select-${i}`"></b-form-checkbox>
          </b-td>
        </b-tr>
        <b-tr :key="staff_id">
          <b-td v-for="day in days" :key="day">
            <b-form-select @change.native="setBGColor($event)" :ref="`regular-${staff_id}-${day}`" :options="regularTimeOption"></b-form-select>
          </b-td>
        </b-tr>
        <b-tr :key="staff_id">
          <b-td v-for="day in days" :key="day">
            <b-form-select @change.native="setBGColor($event)" :ref="`overtime-${staff_id}-${day}`" :options="overTimeAndLateNightOption"></b-form-select>
          </b-td>
        </b-tr>
        <b-tr :key="staff_id">
          <b-td v-for="day in days" :key="day">
            <b-form-select @change.native="setBGColor($event)" :ref="`latenight-${staff_id}-${day}`" :options="overTimeAndLateNightOption"></b-form-select>
          </b-td>
        </b-tr>
        <b-tr :key="staff_id">
          <b-td v-for="day in days" :key="day">
            <b-form-select @change.native="setBGColor($event)" :ref="`type-${staff_id}-${day}`" :options="typeOption"></b-form-select>
          </b-td>
        </b-tr>
        <b-tr :key="staff_id">
          <b-td v-for="day in days" :key="day">
            <b-form-select @change.native="setBGColor($event)" :ref="`bento-${staff_id}-${day}`" :options="bentoOption"></b-form-select>
          </b-td>
        </b-tr>
      </template>
    </b-tbody>
  </b-table-simple>
<template>
//... 

const project

export default {
 beforeCreate() {
  // fetching "project" which is necessary to determine table structure (laying out <b-tr>, <b-th> and <b-td>)
  // this should be done before "mounted()" hook
  firebase.database().ref(`/project/${projectId}`)
                     .once('value')
                     .then(...)
  // fetching "daily_report" which is data to fill each <b-td>
  // this should be executed after "project" is fetched
  firebase.database().ref(`/daily_report/${projectId}`)
                     .once('value')
                     .then(snapShot => {
                       project = snapShot.val()                 
                       ...
                     })
 },
 mounted() {
   const elRegular = this.$refs[`regular-${postfix}`]
   elRegular.value = report.hours_regular
 },
 //...
}

Желаемый порядок для меня таков:

  • инициировано beforeCreate()
  • проект получение инициатором
  • проект получение завершено
  • инициирована выборка daily_report
  • получение ежедневного отчета завершено
  • beforeCreate () готово
  • Все , и визуализируются между created() и mounted()
  • монтируется () инициируется
  • Все они заполнены данными из daily_report
  • монтируется () завершено

Но поскольку firebase. database (). on () и once () являются асинхронными функциями, фактический порядок будет:

  • инициировано beforeCreate()
  • проект получение инициатором
  • инициирована выборка daily_report
  • beforeCreate () готово
  • монтируется () инициируется
  • монтируется () завершено
  • проект получение завершено
  • получение ежедневного отчета завершено

Самая большая проблема здесь, я думаю, заключается в извлечении проекта, завершенного после инициирования mounted (). Я искал async/await и beforeRouteEnter guard маршрутизатора vue, но ни один из них, похоже, не решил мою проблему. Как я могу получить функции, основанные на обещаниях, до того, как смонтированный крючок будет инициирован?

У вопроса есть решение - Посмотреть?

Ответы - Извлечение данных из firebase перед монтированием () на Vue / Fetching data from firebase before mounted() on Vue

Является ответом!
Paul-Louis Mas

22.10.2020 04:34:15

Вместо того чтобы использовать внешнюю переменную, вы должны добавить ее в раздел data вашего компонента. Таким образом, Vue может использовать его после асинхронного вызова Firebase.

export default {
 data() {
  project: {
   // An empty array so Vue start with no lines,
   // and add them once the array is populated.
   assigned_staff: []
 },
 beforeCreate() {
  // fetching "project" which is necessary to determine table structure
  // (laying out <b-tr>, <b-th> and <b-td>)
  // this should be done before "mounted()" hook
  firebase.database().ref(`/project/${projectId}`)
                     .once('value')
                     .then(...)
  // fetching "daily_report" which is data to fill each <b-td>
  // this should be executed after "project" is fetched
  firebase.database().ref(`/daily_report/${projectId}`)
                     .once('value')
                     .then(snapShot => {

                       // Set the property 'project' of the commponent
                       // to the value of the snapshot
                       this.$set(this, 'project', snapShot.val());

                       ...
                     })
 },
 mounted() {
   const elRegular = this.$refs[`regular-${postfix}`]
   elRegular.value = report.hours_regular
 },
 ...
}
Помочь в развитии проекта:
Закрыть X