页面加载时如何将Firebase查询结果渲染到Vue项目的HTML模板

• 模板内直接调用异步方法不会等待异步逻辑执行完成，首次渲染时只会拿到方法同步返回的结果，后续异步回调修改的局部变量无法触发视图更新
• 你在方法内部定义的post是局部非响应式变量，Vue不会跟踪它的数值变化，就算值更新了也不会同步到页面
• 原有async写法存在语法疏漏，then回调未正确闭合，且返回的局部变量无法被模板捕获

1. 声明响应式数据存储文章内容 #

在组件的data选项中定义响应式的post对象，Vue会监听它的属性变化，更新时自动触发视图重渲染。

2. 在生命周期钩子中触发异步查询 #

不要在模板中调用数据查询方法，改为在created/mounted等组件生命周期钩子中调用查询方法，拿到数据后直接修改响应式变量。

3. 模板直接绑定响应式变量 #

把模板中调用方法的逻辑替换为绑定响应式post.content即可。

完整代码示例 #

模板部分

<template>
...
            <q-item-section>
              <q-item-label class="text-subtitle1">
                <strong>Danny Connell</strong>
                <span class="text-grey-7">
                  @danny__connell 
                </span>
              </q-item-label>
              <q-item-label class="qweet-content text-body1">{{ post.content }}</q-item-label>
            </q-item-section>
...
</template>

逻辑部分

export default {
  name: 'PagePost',
  data() {
    return {
      // 定义响应式文章数据
      post: {
        id: null,
        content: ''
      }
    }
  },
  created() {
    // 组件创建完成后触发数据查询
    this.get_post()
  },
  methods: {
    async get_post(){
      const post_id = this.$route.query.id
      this.post.id = post_id
      // 等待Firebase查询结果
      const snapshot = await db.collection('posts').doc(post_id).get()
      const document = snapshot.data()
      // 更新响应式数据，自动同步到视图
      this.post.content = document.content
    }
  }
}

可选优化：可新增loading响应式变量，查询过程中展示加载提示，优化空值阶段的用户体验。

内容的提问来源于stack exchange，提问作者Yagel