firebase - Vuexfire 从数组中的嵌套对象获取值

Question

我有这个 shoppingLists 数组，里面有 2 个购物清单。

https://i.stack.imgur.com/kHSd0.png

我想像这样展示这些购物清单：

https://i.stack.imgur.com/Cmc8K.png

我怎样才能做到这一点？

我使用 vuexFire、firebase 和 vue。

非常感谢。

import {
    ...
  } from 'quasar';


  export default {
    data() {
      return {

      };
    },
    created() {
      this.$store.dispatch('setShoppingListsRef');
      this.$store.dispatch('setFirstListRef');
      this.$store.dispatch('setSecondListRef');
    },
    computed: {
      shoppingLists() {
        return this.$store.state.shoppingLists;
      },
      shoppingListsRef() {
        return this.$store.state.shoppingListsRef;
      },
      firstListRef() {
        return this.$store.state.firstShoppingListRef;
      },
      secondListRef() {
        return this.$store.state.secondShoppingListRef;
      },
    },
    components: {
      ...
    },
  };

  <div>
    <h6 class="on-right">
      Bevásárló listá(i)m
    </h6>

    <div class="row justify-center">
      <q-card inline class="notes" v-for="shoppingList in this.shoppingLists">
        <q-card-title>
          {{ shoppingList['.key'] }}
        </q-card-title>
        <q-card-main class="row justify-start items">
          <q-list>
            <q-item>
              <q-icon name="shopping basket" />
              <span class="on-right" >-- i want shopping list items here --</span>
            </q-item>
          </q-list>
        </q-card-main>
      </q-card>
    </div>
  </div>