diff --git a/components/ProductDisplay.js b/components/ProductDisplay.js index 677f06a..503ab54 100644 --- a/components/ProductDisplay.js +++ b/components/ProductDisplay.js @@ -1,11 +1,13 @@ -Vue.component('product-display', { +app.component('product-display', { props: { premium: { type: Boolean, - required: true, - }, + required: true + } }, - template: ` + template: + /*html*/ + `
@@ -56,18 +58,18 @@ Vue.component('product-display', { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', - quantity: 10, + quantity: 10 }, { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', - quantity: 0, - }, + quantity: 0 + } ], reviews: [], tabs: ['review-form', 'review-list'], - activeTab: 'review-form', + activeTab: 'review-form' } }, methods: { @@ -79,7 +81,7 @@ Vue.component('product-display', { }, addReview(review) { this.reviews.push(review) - }, + } }, computed: { productName() { @@ -96,6 +98,6 @@ Vue.component('product-display', { return 'Free' } return 2.99 - }, - }, + } + } }) diff --git a/components/ReviewForm.js b/components/ReviewForm.js index feef958..f6e58c9 100644 --- a/components/ReviewForm.js +++ b/components/ReviewForm.js @@ -1,5 +1,7 @@ -Vue.component('review-form', { - template: ` +app.component('review-form', { + template: + /*html*/ + `

Leave a review

@@ -26,7 +28,7 @@ Vue.component('review-form', { return { name: '', text: '', - rating: null, + rating: null } }, methods: { @@ -34,12 +36,12 @@ Vue.component('review-form', { const review = { name: this.name, text: this.text, - rating: this.rating, + rating: this.rating } this.$emit('review-submitted', review) this.name = '' this.text = '' this.rating = null - }, - }, + } + } }) diff --git a/components/ReviewList.js b/components/ReviewList.js index a32cb5c..7bf53e7 100644 --- a/components/ReviewList.js +++ b/components/ReviewList.js @@ -1,5 +1,7 @@ -Vue.component('review-list', { - template: ` +app.component('review-list', { + template: + /*html*/ + `

There are no reviews yet.

    @@ -14,7 +16,7 @@ Vue.component('review-list', { props: { reviews: { type: Array, - required: true, - }, - }, + required: true + } + } }) diff --git a/index.html b/index.html index 10f98ff..ee434f0 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,9 @@ - + - - - - - -
    @@ -29,5 +23,9 @@ + + + + diff --git a/main.js b/main.js index b3a4576..b4744a7 100644 --- a/main.js +++ b/main.js @@ -1,12 +1,15 @@ -const app = new Vue({ - el: '#app', - data: { - premium: true, - cart: [], +const app = Vue.createApp({ + data() { + return { + premium: true, + cart: [] + } }, methods: { updateCart(id) { this.cart.push(id) - }, - }, + } + } }) + +app.mount('#app')