Compare commits
5 Commits
a6209b82c8
...
a5ea40c452
| Author | SHA1 | Date | |
|---|---|---|---|
|
a5ea40c452 | ||
|
d0691a96df | ||
|
4b1026e41e | ||
|
|
4d453e91ee | ||
|
|
99a54eb268 |
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
77
index.html
77
index.html
@ -1,37 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Vue Mastery</title>
|
||||
<!-- Import Styles -->
|
||||
<link rel="stylesheet" href="./assets/styles.css" />
|
||||
<!-- Import Vue.js -->
|
||||
<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="nav-bar"></div>
|
||||
|
||||
<div class="product-display">
|
||||
<div class="product-container">
|
||||
<div class="product-image">
|
||||
<img v-bind:src="image">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h1>{{ product }}</h1>
|
||||
<p v-if="inStock">In Stock</p>
|
||||
<p v-else>Out of Stock</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Vue Mastery</title>
|
||||
<!-- Import Styles -->
|
||||
<link rel="stylesheet" href="./assets/styles.css" />
|
||||
<!-- Import Vue.js -->
|
||||
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="nav-bar"></div>
|
||||
|
||||
<!-- Import App -->
|
||||
<script src="./main.js"></script>
|
||||
<div class="product-display">
|
||||
<div class="product-container">
|
||||
<div class="product-image">
|
||||
<img v-bind:src="image" />
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h1>{{ product }}</h1>
|
||||
<p v-if="inStock">In Stock</p>
|
||||
<p v-else>Out of Stock</p>
|
||||
<ul>
|
||||
<li v-for="detail in details">{{ detail }}</li>
|
||||
</ul>
|
||||
<label for="variants">Variants</label>
|
||||
<div
|
||||
id="variants"
|
||||
v-for="variant in variants"
|
||||
:key="variant.id"
|
||||
>
|
||||
{{ variant.color }}
|
||||
</div>
|
||||
<label for="Size">Size</label>
|
||||
<div id="Size" v-for="size in sizes">{{ size }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mount App -->
|
||||
<script>
|
||||
const mountedApp = app.mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
<!-- Import App -->
|
||||
<script src="./main.js"></script>
|
||||
|
||||
<!-- Mount App -->
|
||||
<script>
|
||||
const mountedApp = app.mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
23
main.js
23
main.js
@ -1,10 +1,15 @@
|
||||
const app = Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
product: 'Socks',
|
||||
image: './assets/images/socks_blue.jpg',
|
||||
inStock: true,
|
||||
details: ['50% cotton', '30% wool', '20% polyester']
|
||||
}
|
||||
}
|
||||
})
|
||||
data() {
|
||||
return {
|
||||
product: "Socks",
|
||||
image: "./assets/images/socks_blue.jpg",
|
||||
inStock: true,
|
||||
details: ["50% cotton", "30% wool", "20% polyester"],
|
||||
variants: [
|
||||
{ id: 2234, color: "green" },
|
||||
{ id: 2235, color: "blue" },
|
||||
],
|
||||
sizes: ["S", "M", "L", "XL"],
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user