How to solve : [Vue warn]: Error when rendering component on the vue.js 2?

Question

My component code ( SearchResultView.vue ) is like this :

<template>
    ...
</template>

<script>

    export default{
        props:['search','category','shop'],
        created(){
            ...
        },
        data(){
            return{
                loading:false
            }
        },
        computed:{
            list:function(){
                var a = this.$store.state.product;
                a = JSON.stringify(a)
                a = JSON.parse(a)
                console.log(a.list[12])
                ...
            }
        },
        methods:{
            ...
        }
    }
</script>

When I check this : console.log(a.list[12]) on the console, the result :

I want display value of name

I try like this :

console.log(a.list[12].name)

On the console, exist error like this :

[Vue warn]: Error when rendering component at C:\\xampp\\htdocs\\chelseashop\\resources\\assets\\js\\components\\SearchResultView.vue:

Uncaught TypeError: Cannot read property 'name' of undefined

How can I solve the error?

Answer 1

Because it is a computed, its value probably changes during the life of your program. You should check to ensure that a.list[12] exists before trying to get a member from it.

if (a.list[12])
    console.log(a.list[12].name);