Почему Cannot read property ' of undefined?

Question

[Николай Семенов]

Привет всем.
Ребят помогите.
в консоли вот такие ошибки

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

сам файл CartPage.vue фот таков:

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

метод addToCart отлично добавляет количество с каталога а вот с корзины почему то не хочет

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++
        }
    },

Други помогите разобраться в сем дело

Comments

[Богдан Духевич]

А сама ошибка Вам ни о чем не говорит? Единственное место, где вызывается свойство title - p.title
А значит на этом этапе p == undefined. Копайте в эту сторону.

[wostex]

<ul v-if="products.length">
            <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>

Answer 1

[g00dv1n]

Подруби flow в проект, он будет показывать такие неприятыне места где может быть undefined/null

Comments

[Николай Семенов]

если б я еще знал, что значит flow)

[g00dv1n]

Николай Семенов: https://flow.org/