在 DOM 在 Vuejs 中呈现之前使用来自路由器的参数获取 firebase 数据（有或没有 vuefire）？

Question

我正在从另一个视图导航到一个视图，并将 itemdId 作为参数值传递给 vue 路由器。

我希望能够使用该 itemId 调用 firebase，以便我可以过滤数据，过滤后的 result/data 用于 UI。我正在使用 vuefire.

发生的事情是 vue 在 created() 中的数据可用之前开始渲染，我看到错误是控制台说视图指的是未定义的属性值。

有没有办法在数据可用后渲染视图？

我已经尝试使用 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 screenshot here

Answer 1

正如您所提到的，一种方法是 fetch after navigation，即在组件的 created 挂钩中获取数据。

要使用 vuefire 做到这一点，您需要以编程方式将实时数据库 projectsRef Reference 绑定到 Vue 应用程序中的 projects 属性，因为如下：

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 returns a Promise that is resolved once the data has been retrieved and synced into the state.

注意需要安装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）。

在 DOM 在 Vuejs 中呈现之前使用来自路由器的参数获取 firebase 数据（有或没有 vuefire）？

Get firebase data (with or without vuefire) using a parameter from router before DOM renders in Vuejs?

javascript

firebase

vue.js

firebase-realtime-database

vuefire