Nuxt.js: Cannot read property 'params' of undefined

[Jussiadev]

<template>
    <div class="wrap_content page">
        <div class="content">
            <LeftSide/>
            <div class="content_catalog">
                <div class="top_block">
                    <div class="bread">Товары</div>
                    <div class="grid_buttons">
                        <div class="grid btn on">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="list btn">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
        <div class="description">
            <img :src="good.image" alt="">
            <h1>{{good.brend}}</h1>
            <p>{{good.description}}</p>
        </div>
                <GoodsGrid/>
        </div>
        </div>

    </div>
</template>


<script>
    import GoodsGrid from '~/components/goodsGrid'
    import LeftSide from '~/components/leftSide'

    export default {
        validate ({ params }) {
            // Must be a number
            return /^\d+$/.test(params.id)
        },
//        good()  {
//            return data.goods.filter((good) => String(good.id) === params.id);
//        },
        layout: 'headerAndFooter',
        components: {GoodsGrid,
            LeftSide},
        data ({params}) {
           let goods = [
                {
                    "id": 1,
                    "title": "Сосиски", 
                    "promo": false,
                    "description": "Атяшево  ", 
                    "image": "/img/content/tovar1.png", 
                    "brend": "Атяшево",
                    "brend_id": 2,
                    "min_price": "99.33",
                    "rate": 4.5,
                    "count_rate": 348
                },
                {
                    "id": 2,
                    "title": "Сардельки", 
                    "promo": false,
                    "description": "фрутоняня ",
                    "image": "/img/sliders/brand8.png", 
                    "brend": "фрутоняня",
                    "brend_id": 2,
                    "min_price": "99.33",
                    "rate": 4.5,
                    "count_rate": 348
                }
            ];
            return {
                good: goods.filter((good) => String(good.id) === params.id)
            }
        }
    }
</script>

I try to get element of array goods, And substitute its values depending on the id (dynamically)

_{This question is available on Nuxt.js community (#c1311)}

[alexchopin]

Hi @Jussiadev,
1) params is not available in data, you should use this.$route.params.id.
2) you should use find instead of filter for goods.

[Jussiadev]

@alexchopin thanks

[alexchopin]

Can you provide us a repo to help you?

[Jussiadev]

@alexchopin Everything worked here. But the issue #1463 still does not work. I tried the proposed changes, but it did not help.

[memic84]

Same issue here. Using the this.$route.params.id in created and works if the developer toolbar is open with disable cache. When i don't disable cache, the error consists: Cannot read property 'value' of undefined

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.