Why Cannot read property ' of undefined?

Question

Vue.js

Hi all.
Guys help.
in the console these are the errors

[Vue warn]: Error in render function: 
(found in <CartPage> at C:\OpenServer\domains\pizzaStore\src\pages\CartPage.vue)
warn @ vue.esm.js?65d7:558
handleError @ vue.esm.js?65d7:1443
Vue._render @ vue.esm.js?65d7:3609
updateComponent @ vue.esm.js?65d7:2156
get @ vue.esm.js?65d7:2467
run @ vue.esm.js?65d7:2537
flushSchedulerQueue @ vue.esm.js?65d7:2329
(anonymous) @ vue.esm.js?65d7:505
nextTickHandler @ vue.esm.js?65d7:454
vue.esm.js?65d7:1447 TypeError: Cannot read property 'title' of undefined
    at eval (eval at <anonymous> (http://localhost:8080/dist/build.js:1153:1), <anonymous>:13:27)
    at Array.map (native)
    at cartProducts (eval at <anonymous> (http://localhost:8080/dist/build.js:1153:1), <anonymous>:5:29)
    at wrappedGetter (eval at <anonymous> (http://localhost:8080/dist/build.js:1104:1), <anonymous>:633:12)
    at Vue$3.computed.(anonymous function) (eval at <anonymous> (http://localhost:8080/dist/build.js:1104:1), <anonymous>:436:42)
    at Watcher.get (eval at <anonymous> (http://localhost:8080/dist/build.js:857:1), <anonymous>:2468:25)
    at Watcher.evaluate (eval at <anonymous> (http://localhost:8080/dist/build.js:857:1), <anonymous>:2568:21)
    at Vue$3.computedGetter [as cartProducts] (eval at <anonymous> (http://localhost:8080/dist/build.js:857:1), <anonymous>:2812:17)
    at Object.get [as cartProducts] (eval at <anonymous> (http://localhost:8080/dist/build.js:1104:1), <anonymous>:438:42)
    at VueComponent.mappedGetter (eval at <anonymous> (http://localhost:8080/dist/build.js:1104:1), <anonymous>:744:33)

the CartPage.vue file itself is as follows:

<template>
    <div class="cart">
        <h2>Ваша корзина</h2>
        <p v-show="!products.length"><i>Ваша корзина пуста.</i></p>
        <ul>
            <li v-for="p in products">
                {{ p.title }} - {{ p.price | currency }} x <button class="inc" @click="addToCart(p)">+</button>{{ p.quantity }}<button class="dec" @click="removeFromCart">-</button>
            </li>
        </ul>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    export default {
        computed:
            mapGetters({
                products: 'cartProducts'
            }),
        methods: mapActions([
            'addToCart',
            'removeFromCart'
        ])


    }
</script>
<style>
    .product {
        display: flex;
    }
    .product-item {
        max-height: 482px;
        flex-direction: row;

    }

    .product-picture {
        flex: 0 0 auto;
    }

    .product-name {
        display: inline-block;
    }
</style>

the addToCart method perfectly adds the amount from the catalog, but for some reason it doesn’t want to from the basket

const mutations = {
    [types.ADD_TO_CART] (state, { id }) {
        state.lastCheckout = null
        const record = state.added.find(p => p.id === id)
        if (!record) {
            state.added.push({
                id,
                quantity: 1
            })
        } else {
            record.quantity++
        }
    },

Others help me figure this out

Answer 1

Cut the flow into the project, it will show such unpleasant places where it can be undefined / null