我正在尝试将产品添加到我的购物车,但我不断遇到未捕获的类型错误,因为我是前端开发新手,这对我来说是一件痛苦的事情。
如果我转到指向的 javascriptfile,我会找到这个。 :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;
我在这个问题上坚持了一两天,已经尝试了多种不同的其他选项。但我没有找到任何解决方案。
我这里有什么遗漏的吗? 这段代码足以找到解决方案吗?或者我需要去其他地方搜索吗?
亲切的问候。
最佳答案
正如@Bennett Dams 在评论中提到的;问题就出在这里:
addProductToCart(product) {
this.$store.commit("addProductToCart", this.product);
this.$toastr("success", "Product added to cart successfully.");
},
如您所见,您的方法将 product
作为参数,但随后您尝试将 this.product
发送到您的 vuex 操作(并且 this.product
确实是未定义
)。您应该将代码替换为:
addProductToCart(product) {
this.$store.commit("addProductToCart", product);
this.$toastr("success", "Product added to cart successfully.");
},
关于javascript - 在按钮上使用单击事件时,Vue.js 中出现 TypeError。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52222519/