html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Les créations de Sylvie</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav-bar"></div>
<div id="app">
<div class="product">
<div class="product-image">
<img v-bind:src="image"/>
</div>
<div class="product-info">
<h1>{{ title }}</h1>
<p v-if="InStock">En stock!</p>
<p v-else :class="{ outOfStock: !InStock }">Rupture de stock!</p>
<ul>
<li v-for="detail in details"> {{ detail }} </li>
</ul>
<div v-for="variant in variants"
:key="variant.variantId"
class="color-box"
:style="{ backgroundColor : variant.variantColor }"
@mouseover="updateProduct(variant.variantImage)">
</div>
<button v-on:click="addToCart"
:disabled="!InStock"
:class="{ disabledButton : !InStock }">Ajouter au panier</button>
<button v-on:click="deleteAElement"
:disabled="!InStock"
:class="{ disabledButton : !InStock}">Enlever un element</button >
<p>panier( {{ cart }} )</p>
</div>
</div>
</div>
</div>
<script src="[http://cdn.jsdelivr.net/npm/vue](http://cdn.jsdelivr.net/npm/vue)"></script>
<script src="main.js"></script>
</body>
</html>