1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- const DISABLED = "disabledButton";
- const app = new Vue({
- el: "#app",
- data: {
- cart: 0,
- description: "Chaussettes montantes",
- details: [
- "80% cotton",
- "20% polyester",
- "Gender-neutral",
- ],
- image: "./assets/img/vmSocks-green-onWhite.jpg",
- inventory: 15,
- link: "https://www.google.com/search?q=vuejs+socks",
- onSale: false,
- product: "Socks",
- sizes: [32, 34, 36, 38, 40, 42, 44, 46, 48],
- variants: [
- { variantId: 2234, variantColor: "green", variantImage: "./assets/img/vmSocks-green-onWhite.jpg", },
- { variantId: 2235, variantColor: "blue", variantImage: "./assets/img/vmSocks-blue-onWhite.png", },
- ]
- },
- methods: {
- addToCart(mouseEvent) {
- const target = mouseEvent.target;
- if (this.inventory <= 0) {
- if (this.inventory < 0) {
- this.inventory = 0;
- }
- target.classList.add(DISABLED);
- return;
- }
- target.classList.remove(DISABLED);
- this.inventory--;
- this.cart++;
- if (this.inventory <= 0) {
- this.inventory = 0;
- target.classList.add(DISABLED);
- }
- this.$refs.remove.classList.remove(DISABLED);
- },
- removeFromCart(mouseEvent) {
- const target = mouseEvent.target;
- if (this.cart <= 0) {
- if (this.cart < 0) {
- this.cart = 0;
- }
- target.classList.add(DISABLED);
- }
- target.classList.remove(DISABLED);
- this.inventory++;
- this.cart--;
- if (this.cart <= 0) {
- this.cart = 0;
- target.classList.add(DISABLED);
- }
- this.$refs.add.classList.remove(DISABLED);
- },
- updateImage(imageSrc) {
- this.image = imageSrc;
- }
- },
- });
|