Book component is working

fix bug with reflect-metadata

src/App.vue

@@ -37,7 +37,9 @@
       <v-container
         class="fill-height"
         fluid
-      />
+      >
+        <book :model="book" />
+      </v-container>
     </v-content>
     <v-btn
       bottom
@@ -60,6 +62,7 @@ import { inject } from 'inversify-props'
 import { Registry } from './Registry'
 import IBookService from './services/IBookService'
 import Book from './components/book/Book.vue'
+import IBook from './models/IBook'
 
 // almost everything we create will be a component
 // vue apps are components made up of other components
@@ -72,13 +75,22 @@ import Book from './components/book/Book.vue'
 export default class extends Vue {
   // this is a property getter.  Typescript lets us say what type of
   // value will be returned (string).  It's used up in the template as {{ AppTitle }}
-  get AppTitle (): string { return 'lootly' }
+  get AppTitle (): string { return process.env.VUE_APP_TITLE }
 
   @inject(Registry.IBookService)
   private bookService!: IBookService
 
   // some bogus properties to act as placeholders for the layout we're starting with
   private drawer: boolean = false
   private dialog: boolean = false
+
+  private book: IBook | null = null
+
+  async created (): Promise<void> {
+    await this.bookService.get('1').then((result) => {
+      this.book = result
+      console.log(this.book)
+    })
+  }
 }
 </script>

src/app.container.ts

@@ -1,4 +1,3 @@
-import 'reflect-metadata'
 import { container } from 'inversify-props'
 import { Registry } from './Registry'
 

src/components/book/Book.vue

@@ -1,23 +1,24 @@
 <template>
-  <div v-if="model">
-    <h1>{{ model.title }}</h1>
+  <div>
+    <h1 v-if="model">
+      {{ model.title }}
+    </h1>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { inject } from 'inversify-props'
-import { Registry } from '@/Registry'
 import IBook from '@/models/IBook'
-import IBookService from '@/services/IBookService'
 
 @Component({
   name: 'book'
 })
 export default class extends Vue {
   @Prop(Object) readonly model!: IBook
 
-  @inject(Registry.IBookService)
-  private bookService!: IBookService
+  mounted () {
+    console.log('book component')
+    console.log(this.model)
+  }
 };
 </script>

src/main.ts

@@ -1,3 +1,4 @@
+import 'reflect-metadata'
 import { Vue } from 'vue-property-decorator'
 import App from '@/App.vue'
 import vuetify from '@/plugins/vuetify'