js__vue_mastery/main.js

const DISABLED = "disabledButton";

const app = new Vue({
    el: "#app",
    // Computer properties are cached until dependencies change.
    // => cheaper than methods.
    computed: {
        image() {
            const image = this.variants[this.selectedVariant].variantImage;
            return image;
        },
        inStock() {
            return this.variants[this.selectedVariant].variantQuantity > 0;
        },
        title() {
            return [this.brand, this.product].join(' ');
        }
    },
    data: {
        brand: "Vue Mastery",
        cart: 0,
        description: "Chaussettes montantes",
        details: [
            "80% cotton",
            "20% polyester",
            "Gender-neutral",
        ],
        inventory: 15,
        link: "https://www.google.com/search?q=vuejs+socks",
        onSale: false,
        product: "Socks",
        selectedVariant: 0,
        sizes: [34, 36, 38, 40, 42, 44, 46],
        variants: [
            {
                variantId: 2234,
                variantColor: "green",
                variantImage: "./assets/img/vmSocks-green-onWhite.jpg",
                variantQuantity: 10,
            },
            {
                variantId: 2235,
                variantColor: "blue",
                variantImage: "./assets/img/vmSocks-blue-onWhite.png",
                variantQuantity: 0,
            },
        ]
    },
    methods: {
        addToCart(mouseEvent) {
            if (this.variants[this.selectedVariant].variantQuantity < 0) {
                this.variants[this.selectedVariant].variantQuantity = 0;
                return;
            }
            this.variants[this.selectedVariant].variantQuantity--;
            this.cart++;
            if (this.variants[this.selectedVariant].variantQuantity <= 0) {
                this.variants[this.selectedVariant].variantQuantity = 0;
            }
        },
        updateImage(index) {
            this.selectedVariant = index;
        }
    },
});