From b59212d33fabf7891d159420ae3f6884850d5431 Mon Sep 17 00:00:00 2001
From: Niels Kooiman <kooiman@dnaservices.com>
Date: Wed, 14 Aug 2019 11:40:48 +0200
Subject: [PATCH] Reference domain

---
 src/components/Card.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Card.vue b/src/components/Card.vue
index ae3ca16..5011680 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -5,12 +5,19 @@
                 ?
             </Box>
         </div>
+        <template v-for="item, index in items" >
+            <div class="item" :key="item.id">
+                {{ index }}  {{ item.title }} {{ item.artist }} {{ item.duration }}
+                <button :disabled="item.disabled" @click="orderItem(item)">Order</button>
+            </div>
+        </template>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import posed from "vue-pose";
+import domain from "@/domain/domain";
 
 @Component({
     components: {
@@ -23,7 +30,7 @@ import posed from "vue-pose";
 export default class CardComponent extends Vue {
     private isVisible: boolean;
     public data() {
-        return { isVisible: this.isVisible };
+        return { isVisible: this.isVisible, items: domain.musicCatalog.get() };
     }
     public mounted() {
         setInterval(() => {