在按钮上使用 clickevent 时 Vue.js 中出现类型错误。

Question

我正在尝试将产品添加到我的购物车，但我一直遇到未捕获的 TypeError，因为我是前端开发的新手，这对我来说很痛苦。

这是向我显示的错误。

如果我转到指向的 javascript 文件，我会找到这个。 :4 抛出 product.quantity = 1; 这是 Mutation.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>

对于同一个文件，这里是整个脚本部分的代码。

<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>

index.js文件

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;

我坚持这一天或 2 天已经尝试了多个不同的其他选项。但是我没有找到任何解决方案。

这里有什么我遗漏的吗？这段代码是否足以找到解决方案？还是我需要去别的地方搜索。

亲切的问候。

Answer 1

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

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

如您所见，您的方法将 product 作为参数，但是您试图将 this.product 发送到您的 vuex 操作（并且 this.product 确实是 undefined).您应该将您的代码替换为：

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

在按钮上使用 clickevent 时 Vue.js 中出现类型错误。

TypeError in Vue.js while using clickevent on button.

javascript

shopping-cart

object

vue.js