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

L7 starting code

Browse Source
This commit is contained in:
Adam Jahr 2020-07-06 21:58:48 -04:00
parent 44d8427b7a
commit 58e74974e0
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -26,8 +26,14 @@
<ul> <ul>
<li v-for="detail in details">{{ detail }}</li> <li v-for="detail in details">{{ detail }}</li>
</ul> </ul>
<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
class="color-circle"
v-for="variant in variants"
:key="variant.id"
@mouseover="updateImage(variant.image)"
:style="{ backgroundColor: variant.color }"></div>
<button class="button" :class="{ disabledButton: !inStock }" :disabled="!inStock" v-on:click="addToCart">Add to Cart</button>
</div> </div>
</div> </div>
</div> </div>

2
main.js
View File

@ -5,7 +5,7 @@ const app = Vue.createApp({
product: 'Socks', product: 'Socks',
brand: 'Vue Mastery', brand: 'Vue Mastery',
image: './assets/images/socks_blue.jpg', image: './assets/images/socks_blue.jpg',
inStock: true, inStock: false,
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' }, { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },