有没有办法从 firebase 中获取 json obj 作为集合并对其进行操作以填充 vue.js 中的表

Question

这是我的信息格式：

this.lessonCompletions = lessonCompletions: {exercise 101: { elbandito: 100, grogu: 1532, willie: 23}, exercise 102: {elbandito: 1234, willie:2053}, lesson 101: {elbandito: 10234}}

我正在尝试将其设置为一个 b-table 元素，并向管理员显示他们完成每节课的人数。

我什至无法让表格填充任何内容。我很迷茫，有什么建议！？

<template>
  <div>
    <b-table>
      <thead>
        <tr>
          <th>Exercise/Lesson</th>
          <th v-for="(value, key) in users" :key="key">{{ key }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(completions, exerciseOrLesson) in lessonCompletions" :key="exerciseOrLesson">
          <td>{{ exerciseOrLesson }}</td>
          <td v-for="(value, key) in users" :key="key">{{ completions[key] || '-' }}</td>
        </tr>
      </tbody>
    </b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lessonCompletions: {},
      users: {},
    };
  },
  methods: {
    async loadData() {
      // loaded from firebase. Object looks like what i put above
    },
  },
  created() {
    this.loadData();
  },
};
</script>

我希望它能填满表格，但实际上是完全空白的，没有错误