Получить данные Firebase (с или без vuefire), используя параметр от маршрутизатора, прежде чем DOM рендерится в Vuejs? - PullRequest
Новая
       86

Получить данные Firebase (с или без vuefire), используя параметр от маршрутизатора, прежде чем DOM рендерится в Vuejs?

0 голосов
/ 23 октября 2019

Я перехожу в представление из другого представления и передаю itemdId в качестве значения параметра в vue router.

Я хочу иметь возможность вызывать firebase с этим itemId, чтобы я мог фильтровать данные, и отфильтрованные результаты / данные используются в пользовательском интерфейсе. Я использую vuefire.

Происходит то, что vue начинает рендеринг до того, как данные будут доступны в create (), и я вижу ошибку, когда консоль говорит, что представление ссылается на неопределенные значения свойств.

Есть ли способ визуализации представления после того, как данные станут доступны?

Я пробовал использовать beforeMount, а также created и beforeCreate.

См. Код ниже: 

<h1>{{projects[0].project_name}}</h1> //it says type error. cannot read property project_name of undefined. Sometimes on refresh it works but most times it does not.

Код скрипта ниже: 

    let projectsRef = db.ref('projects');
    export default {
        name: 'ProjectDetailsOpenInvesting',
        props: {
          data: Object
    },
    firebase:{
      projects: projectsRef
    },
    data(){
      return {
        projects:[],
        .....

      }
    },
    created(){
      var that = this;
      console.log(this.$route.params.itemid) //this works
      this.projects = this.projects.filter(function(p){
        return p.project_id == that.$route.params.itemid //this works as well
      })
    }

Скриншот Firebase здесь

1 Ответ

0 голосов
/ 23 октября 2019

Как вы упомянули, один из подходов - выборка после навигации , т.е. выборка данных в хуке created компонента.

Чтобы сделать это с vuefire, вам необходимо программно связать базу данных реального времени projectsRef Reference со свойством projects в приложении Vue следующим образом: 

created(){
  console.log(this.$route.params.itemid)
  const itemId = this.$route.params.itemid;
  this.$rtdbBind('projects', projectsRef.orderByKey().equalTo(itemId)).then(projects => {
     this.projects === projects;
  });
}

Как объяснено в API doc :

$ rtdbBind возвращает Обещание, которое разрешается после того, как данные получены и синхронизированы в состояние.

Обратите внимание, что вам нужно установить плагин rtdbPlugin: https://vuefire.vuejs.org/api/vuefire.html#rtdbplugin

Также обратите внимание, что вместо фильтрации нужного элемента project во внешнем интерфейсе (с помощьюfilter(function(p){return p.project_id == that.$route.params.itemid}))), мы фильтруем его в бэкэнде, на уровне базы данных (projectsRef.orderByKey().equalTo(itemId)), который более эффективен и позволяет избежать передачи всего набора объектов от бэкэнда до внешнего интерфейса (ине платит за этот загруженный том, см. https://firebase.google.com/pricing?authuser=0).

...