CartButton

Vue.component("cartbuttoncomponent", {
    props: [
        "text",
        "type",
        "code",
        "id"
    ],
    data() {
      return {
        show: true,
        courses: {},
        cookieName: 'cart_items',
        cartjson: {}
      };
    },
    created: function() {
        this.courses = this.$root.$data.shared.cart;
    },
    mounted: function () {
        this.$root.$on("changeButtonState", () => {
            this.show=!this.show;
        });
        var that = this;
        if (this.courses.length > 0) {
            this.courses.forEach(function(course){
                if (course.code === that.code) {
                    that.show = !that.show;
                }
            });
        }
    },
    methods: {
        addToCart: function() {
            this.show = !this.show;
            const addToCart = this.$refs.addToCart;
            const id = addToCart.dataset.id;
            const code = addToCart.dataset.code;
            const type = addToCart.dataset.type;
            var product = new Object;
            product.id = id;
            product.code = code;
            product.type = type;
            this.$root.$emit('addcourses', product);
        },

        removeFromCart: function(code) {
            this.show = !this.show;
            this.$root.$emit('removecourses', code);
        }
    },
    
    template: `
    <div>
        <a href="javascript:void(0);" ref="addToCart" class="button-addtocart button-small" @click="addToCart" v-if="show" :data-id="id" :data-code="code" :data-type="type">{{text}}</a>
        <a href="javascript:void(0);" ref="addToCart" class="button-addtocart button-small button-red" @click="removeFromCart(code)" v-if="!show" :data-id="id" :data-code="code" :data-type="type">Remove</a>
    </div>
    `
});