我有这个 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>