Javascript 使用clickevent on按钮时Vue.js中的TypeError。

我正试图将产品添加到我的购物车中，但我一直碰到未捕获的类型错误，因为我是前端开发新手，这对我来说是一个痛苦

这就是显示给我的错误。

如果我转到指向的javascriptfile，我会找到这个。结果：产品上有4次投掷。数量=1； 这是突变的一部分。js

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

当我转到Action.js时，我看到了以下代码。这将检查单击对象的索引，并将其添加到购物车中

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);
 }
};

现在转到我的ProductList.vue模板内容中，我将此代码添加到我的按钮中，用于将产品添加到购物车

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

我坚持了一两天，已经尝试了多种不同的选择。但我没有找到任何解决办法

这里有我遗漏的东西吗？ 此代码是否足以找到解决方案？或者我需要在其他地方搜索

---

亲切问候。

正如@Bennett Dams在评论中提到的；问题就在这里：

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

如您所见，您的方法将

产品

作为一个参数，但随后您尝试将

此.product

发送到vuex操作（并且

此.product

确实是

未定义的

）。您应该将代码替换为：

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

---

您是否尝试过记录

产品的值

？在

addProductToCart（）

函数中，

console.log（product）

例如，您正在

ProductList.vue

方法中使用

this.product

。但是，

这个产品在哪里？没有具有该名称的变量或计算属性。错误已消失，尚未生效，但此问题已修复，谢谢hammerbot和@Bennett Dams。愚蠢的错误！
addProductToCart(product) {
    this.$store.commit("addProductToCart", this.product);
    this.$toastr("success", "Product added to cart successfully.");
},

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