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

WIP L10.4

Browse Source
This commit is contained in:
bwbl 2026-01-13 16:27:46 +01:00
parent 6253c36939
commit 3251d861fc
3 changed files with 97 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
components/ProductDisplay.js
View File

@ -1,13 +1,13 @@
app.component('product-display', { app.component("product-display", {
props: { props: {
premium: { premium: {
type: Boolean, type: Boolean,
required: true required: true,
} },
}, },
template: template:
/*html*/ /*html*/
`<div class="product-display"> `<div class="product-display">
<div class="product-container"> <div class="product-container">
<div class="product-image"> <div class="product-image">
<img v-bind:src="image"> <img v-bind:src="image">
@ -42,41 +42,52 @@ app.component('product-display', {
</div> </div>
</div> </div>
</div>`, </div>`,
data() { data() {
return { return {
product: 'Socks', product: "Socks",
brand: 'Vue Mastery', brand: "Vue Mastery",
selectedVariant: 0, selectedVariant: 0,
details: ['50% cotton', '30% wool', '20% polyester'], details: ["50% cotton", "30% wool", "20% polyester"],
variants: [ variants: [
{ id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 }, {
{ id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 }, id: 2234,
] color: "green",
} image: "./assets/images/socks_green.jpg",
}, quantity: 50,
methods: { },
addToCart() { {
this.cart += 1 id: 2235,
}, color: "blue",
updateVariant(index) { image: "./assets/images/socks_blue.jpg",
this.selectedVariant = index quantity: 0,
} },
}, ],
computed: { };
title() { },
return this.brand + ' ' + this.product methods: {
}, addToCart() {
image() { this.$emit("add-to-cart", this.variants[this.selectedVariant].id);
return this.variants[this.selectedVariant].image this.cart += 1;
}, },
inStock() { updateVariant(index) {
return this.variants[this.selectedVariant].quantity this.selectedVariant = index;
}, },
shipping() { },
if (this.premium) { computed: {
return 'Free' title() {
} return this.brand + " " + this.product;
return 2.99 },
} image() {
} return this.variants[this.selectedVariant].image;
}) },
inStock() {
return this.variants[this.selectedVariant].quantity;
},
shipping() {
if (this.premium) {
return "Free";
}
return 2.99;
},
},
});

49
index.html
View File

@ -1,30 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Vue Mastery</title> <title>Vue Mastery</title>
<!-- Import Styles --> <!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" /> <link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js --> <!-- Import Vue.js -->
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script> <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="nav-bar"></div> <div class="nav-bar"></div>
<div class="cart">Cart({{ cart }})</div> <div class="cart">Cart({{ cart.length }})</div>
<product-display :premium="premium"></product-display> <product-display
</div> :premium="premium"
@add-to-cart="updateCart"
></product-display>
</div>
<!-- Import App --> <!-- Import App -->
<script src="./main.js"></script> <script src="./main.js"></script>
<!-- Import Components --> <!-- Import Components -->
<script src="./components/ProductDisplay.js"></script> <script src="./components/ProductDisplay.js"></script>
<!-- Mount App --> <!-- Mount App -->
<script> <script>
const mountedApp = app.mount('#app') const mountedApp = app.mount("#app");
</script> </script>
</body> </body>
</html> </html>

20
main.js
View File

@ -1,9 +1,13 @@
const app = Vue.createApp({ const app = Vue.createApp({
data() { data() {
return { return {
cart: 0, cart: [],
premium: true premium: true,
} };
}, },
methods: {} methods: {
}) updateCart(id) {
this.cart.push(id);
},
},
});