b/intro-to-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switched to vue 3

Browse Source
This commit is contained in:
Adam Jahr 2020-05-14 19:06:51 -04:00
parent 0ade166fd9
commit 83ceaf0593
5 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/ProductDisplay.js
View File

@ -1,11 +1,13 @@
Vue.component('product-display', {
app.component('product-display', {
props: {
premium: {
type: Boolean,
required: true,
},
required: true
}
},
template: `
template:
/*html*/
`
<div class="product">
<div class="container">
@ -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
},
},
}
}
})

14
components/ReviewForm.js
View File

@ -1,5 +1,7 @@
Vue.component('review-form', {
template: `
app.component('review-form', {
template:
/*html*/
`
<form class="review-form" @submit.prevent="onSubmit">
<h3>Leave a review</h3>
@ -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
},
},
}
}
})

12
components/ReviewList.js
View File

@ -1,5 +1,7 @@
Vue.component('review-list', {
template: `
app.component('review-list', {
template:
/*html*/
`
<div class="review-container">
<p v-if="!reviews.length">There are no reviews yet.</p>
<ul v-else>
@ -14,7 +16,7 @@ Vue.component('review-list', {
props: {
reviews: {
type: Array,
required: true,
},
},
required: true
}
}
})

12
index.html
View File

@ -6,15 +6,9 @@
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
</head>
<body>
<!-- Import Components -->
<script src="./components/ProductDisplay.js"></script>
<script src="./components/ReviewForm.js"></script>
<script src="./components/ReviewList.js"></script>
<div id="app">
<div class="nav-bar"></div>
@ -29,5 +23,9 @@
<!-- Import App -->
<script src="./main.js"></script>
<!-- Import Components -->
<script src="./components/ProductDisplay.js"></script>
<script src="./components/ReviewForm.js"></script>
<script src="./components/ReviewList.js"></script>
</body>
</html>

17
main.js
View File

@ -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')