TypeError in Vue.js while using clickevent on button.

Question

I am trying to add products to my shoppingcart but I keep bumping to the uncaught TypeError, since I am new to front-end development this is a pain in the ass for me.

This is the error that is shown to me.

If I go to the pointed javascriptfile I find this. The :4 throws on the product.quantity = 1; This is part of the Mutation.js

export const addProductToCart = (state, product) => {
  product.quantity = 1;
  state.cart.push(product);
};

When I go to the Action.js I see this code. This is going to check the index of the clicked object and add this to the cart.

export const addProductToCart = ({ state, commit }, product) => {
 const exists = state.cart.find(exists => exists.Id === product.Id);

 if (exists) {
   commit("updateProductQuantity", product);
 }else {
   commit("addProductToCart", product);
 }
};

Now to my ProductList.vue In the template content I added this code to my button for adding the product to the cart.

<b-button variant="primary" @click="addProductToCart(product)">           
Add to cart</b-button>

For the same file here is the code of the whole script section.

<script>
export default {
 name: "product-list",
 props: {
   products: {
     type: Array,
     required: true,
   }
 },
 methods: {
   view(product) {
     this.$router.push (`/products/${product.slug}`);
    },
 addProductToCart(product) {
    this.$store.commit("addProductToCart", this.product);
    this.$toastr("success", "Product added to cart successfully.");
  },
 }
};
</script>

The index.js file

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import * as actions from "./actions";
import * as mutations from "./mutations";
import * as getters from "./getters";

const store = new Vuex.Store({
 strict: true,
 actions,
 mutations,
 getters,
 state: {
    cart: [],  
 }
});

store.subscribe((mutation, state) => {
 localStorage.setItem("store", JSON.stringify(state));
});
export default store;

Im stuck on this for a day or 2 already trying multiple different other options. But I do not find any solution.

Is there anything I am missing here? Is this code sufficient for finding a solution? Or do I need to search somewhere else.

Kind regards.

Have you tried logging the value of product ? In addProductToCart() function, console.log(product) for example — vjarysta
– vjarysta, Commented Sep 7, 2018 at 12:32
You're using this.product In the ProductList.vue method addProductToCart. Where is this.product though? There is no variable or computed property with that name. — Bennett Dams
– Bennett Dams, Commented Sep 7, 2018 at 12:36

Hammerbot · Accepted Answer · 2018-09-07 13:09:04Z

1

As mentioned by @Bennett Dams in the comments; The problem lives here:

addProductToCart(product) {
    this.$store.commit("addProductToCart", this.product);
    this.$toastr("success", "Product added to cart successfully.");
},

As you can see, your method takes the product as a parameter, but then you are trying to send this.product to your vuex action (and this.product is indeed undefined). You should replace your code by:

addProductToCart(product) {
    this.$store.commit("addProductToCart", product);
    this.$toastr("success", "Product added to cart successfully.");
},

answered Sep 7, 2018 at 13:09

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vanonckelen Dieter Over a year ago

The error is gone, not working yet, but this issue is already fixed, thank you hammerbot and @Bennett Dams. Stupid mistake!

Collectives™ on Stack Overflow

TypeError in Vue.js while using clickevent on button.

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related