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

L6 ending code

Browse Source
This commit is contained in:
Adam Jahr 2020-06-24 01:48:12 -04:00
parent 2bd501d071
commit 7f52372b6c
3 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles.css
View File

@ -25,7 +25,7 @@ body {
margin: 25px 100px;
float: right;
border: 1px solid #d8d8d8;
padding: 10px 30px;
padding: 30px 30px;
background-color: white;
-webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);

8
index.html
View File

@ -11,6 +11,8 @@
<body>
<div id="app">
<div class="nav-bar"></div>
<div class="cart">Cart({{ cart }})</div>
<div class="product-display">
<div class="product-container">
@ -24,10 +26,8 @@
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<ul>
<li v-for="size in sizes">{{ size }}</li>
</ul>
<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
<div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}</div>
<button class="button" v-on:click="addToCart">Add to Cart</button>
</div>
</div>
</div>

14
main.js
View File

@ -1,15 +1,23 @@
const app = Vue.createApp({
data() {
return {
cart:0,
product: 'Socks',
image: './assets/images/socks_blue.jpg',
inStock: true,
details: ['50% cotton', '30% wool', '20% polyester'],
sizes: ['S', 'M', 'L', 'XL'],
variants: [
{ id: 2234, color: 'green' },
{ id: 2235, color: 'blue' },
{ id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },
{ id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
]
}
},
methods: {
addToCart() {
this.cart += 1
},
updateImage(variantImage) {
this.image = variantImage
}
}
})