Напечатайте ошибку в Vue.js, используя clickkevent на кнопке. - PullRequest
Новая
       7

Напечатайте ошибку в Vue.js, используя clickkevent на кнопке.

0 голосов
/ 07 сентября 2018

Я пытаюсь добавить продукты в свою корзину, но продолжаю натыкаться на необъявленную ошибку 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 уже пробуют несколько разных вариантов.Но я не нахожу никакого решения.

Есть ли здесь что-то, чего мне не хватает?Достаточно ли этого кода для поиска решения?Или мне нужно искать где-нибудь еще.

С уважением.

1 Ответ

0 голосов
/ 07 сентября 2018

Как упомянуто @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.");
},
...