Vuexfire получает значения из вложенного объекта в массиве - PullRequest
Новая
       47

Vuexfire получает значения из вложенного объекта в массиве

0 голосов
/ 24 октября 2018

У меня есть этот массив shoppingLists с двумя списками покупок.

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>
...