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

L4 startign code

Browse Source
This commit is contained in:
Adam Jahr 2020-07-20 23:55:01 -04:00
parent b92a6c065c
commit 2e9bcf7c72
3 changed files with 0 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
components/ProductDisplay.js
View File

@ -1,102 +0,0 @@
app.component('product-display', {
props: {
premium: {
type: Boolean,
required: true
}
},
template:
/*html*/
`
<div class="product-display">
<div class="product-container">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ productName }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<p>Shipping: {{ shipping }}</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<div class="color-circle"
v-for="(variant, index) in variants"
:key="variant.id"
:style="{ backgroundColor: variant.color }"
@mouseover="updateProduct(index)"
>
</div>
<button class="button" v-on:click="addToCart"
:disabled="!inStock"
:class="{ disabledButton: !inStock }"
>
Add to cart
</button>
</div>
</div>
<review-list :reviews="reviews"></review-list>
<review-form @review-submitted="addReview" ></review-form>
</div>
`,
data() {
return {
product: 'Socks',
brand: 'Vue Mastery',
selectedVariant: 0,
details: ['80% cotton', '20% polyester', 'Gender-neutral'],
variants: [
{
id: 2234,
color: 'green',
image: './assets/images/socks_green.jpg',
quantity: 10
},
{
id: 2235,
color: 'blue',
image: './assets/images/socks_blue.jpg',
quantity: 0
}
],
reviews: [],
tabs: ['review-form', 'review-list'],
activeTab: 'review-form'
}
},
methods: {
addToCart() {
this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
},
updateProduct(index) {
this.selectedVariant = index
},
addReview(review) {
this.reviews.push(review)
}
},
computed: {
productName() {
return this.brand + ' ' + this.product
},
image() {
return this.variants[this.selectedVariant].image
},
inStock() {
return this.variants[this.selectedVariant].quantity
},
shipping() {
if (this.premium) {
return 'Free'
}
return 2.99
}
}
})

52
components/ReviewForm.js
View File

@ -1,52 +0,0 @@
app.component('review-form', {
template:
/*html*/
`
<form class="review-form" @submit.prevent="onSubmit">
<h3>Leave a review</h3>
<label for="name">Name:</label>
<input id="name" v-model="name">
<label for="review">Review:</label>
<textarea id="review" v-model="text"></textarea>
<label for="rating">Rating:</label>
<select id="rating" v-model.number="rating">
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
</select>
<input class="button" type="submit" value="Submit">
</form>
`,
data() {
return {
name: '',
text: '',
rating: null
}
},
methods: {
onSubmit() {
if (this.name === '' || this.text === '' || this.rating === null) {
alert('Review is incomplete. Please fill out every field.')
return
}
const review = {
name: this.name,
text: this.text,
rating: this.rating
}
this.$emit('review-submitted', review)
this.name = ''
this.text = ''
this.rating = null
}
}
})

22
components/ReviewList.js
View File

@ -1,22 +0,0 @@
app.component('review-list', {
template:
/*html*/
`
<div v-if="reviews.length" class="review-container">
<h3>Reviews:</h3>
<ul>
<li v-for="(review, index) in reviews" :key="index">
{{ review.name }} gave this {{ review.rating }} stars
<br/>
"{{ review.text }}"
</li>
</ul>
</div>
`,
props: {
reviews: {
type: Array,
required: true
}
}
})