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-21 00:28:40 -04:00
parent c3db9998f8
commit 094670e2a9
1 changed files with 3 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -17,9 +17,7 @@
<div class="product-display"> <div class="product-display">
<div class="product-container"> <div class="product-container">
<div class="product-image"> <div class="product-image">
<!-- solution --> <img v-bind:src="image">
<img :class="{ 'out-of-stock-img': !inStock }" v-bind:src="image">
<!-- solution -->
</div> </div>
<div class="product-info"> <div class="product-info">
<h1>{{ product }}</h1> <h1>{{ product }}</h1>
@ -30,12 +28,11 @@
</ul> </ul>
<div <div
class="color-circle"
v-for="variant in variants" v-for="variant in variants"
:key="variant.id" :key="variant.id"
@mouseover="updateImage(variant.image)" @mouseover="updateImage(variant.image)"
:style="{ backgroundColor: variant.color }"></div> >{{ variant.color }}</div>
<button class="button" :class="{ disabledButton: !inStock }" :disabled="!inStock" v-on:click="addToCart">Add to Cart</button> <button class="button" v-on:click="addToCart">Add to Cart</button>
</div> </div>
</div> </div>
</div> </div>