Vue: Error in render: "TypeError: event is undefined"

Posted 4 months ago by Gabotronix

Hi everybody, I'm trying to gain access to the event instance of a click in my vue template, however I'm getting the following error message:

[Vue warn]: Error in render: "TypeError: event is undefined"

This is the click event I want to capture in my method:

<div v-for="product in productcategory.products" :key="product.id" :click="selectProduct(product)" style="width:100%; height:50px; outline:1px solid red; margin:5px 0px;">
                <span>{{ product.title }}</span>
            </div>

And my methods where I think the error is:

methods:{

    selectProduct: function( product, event){
        
        let productCategoryId = product.product_category_id;

        switch(productCategoryId){

            case 1: //Hamburguesa
                let hamburgerCount = this.cartItem.filter(cartItem => cartItem.productCategoryId == 1).length;
                let isAlreadyAdded = this.cartItem.filter(cartItem => cartItem.id == product.id).length;
                if(hamburgerCount < 1 && isAlreadyAdded == 0){
                    //add product to cartItem
                    this.cartItem.push({ id: product.id, title: product.title, productCategroyId: product.product_category_id, finalPrice: product.finalPrice })
                    event.target.classList.add("active");
                }
                else if(isAlreadyAdded > 0){
                    //find index and remove from array
                    event.target.classList.remove("active"); 
                }
            break;
        }
        
    }
}

Any idea how I can do this?

Please sign in or create an account to participate in this conversation.