Skip to content

Commit

Permalink
Book component is working
Browse files Browse the repository at this point in the history
fix bug with reflect-metadata
  • Loading branch information
finalcut committed Feb 25, 2020
1 parent a652935 commit 898bfaf
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 10 deletions.
16 changes: 14 additions & 2 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@
<v-container
class="fill-height"
fluid
/>
>
<book :model="book" />
</v-container>
</v-content>
<v-btn
bottom
Expand All @@ -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
Expand All @@ -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>
1 change: 0 additions & 1 deletion src/app.container.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'reflect-metadata'
import { container } from 'inversify-props'
import { Registry } from './Registry'

Expand Down
15 changes: 8 additions & 7 deletions src/components/book/Book.vue
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions src/main.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'reflect-metadata'
import { Vue } from 'vue-property-decorator'
import App from '@/App.vue'
import vuetify from '@/plugins/vuetify'
Expand Down

0 comments on commit 898bfaf

Please sign in to comment.