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?

Since this is a rendering problem you will need to privde the template you use to us. Most probably you access data before it's loaded or you pass false properties — Frnak
– Frnak, Commented Feb 1, 2017 at 12:34
What is the response of : console.log(JSON.stringify(a.list[12]))? — Saurabh
– Saurabh, Commented Feb 1, 2017 at 12:37
@Saurabh, {"id":12,"name":"Bunga Gandeng","photo":"bunga6.jpg","price":762913,"stock":36,"total_sold":54,"total_view":0,"weight":68,"store_id":1,"shop_name":"Bunga Airi","formatted_address":"Kemang"} — moses toh
– moses toh, Commented Feb 1, 2017 at 12:43
As @FrankProvost says, please add your template it seems that here is the problem, also I suppose that at the end of your list function you're returning a value, but could you please add whole function's body? — AldoRomo88
– AldoRomo88, Commented Feb 1, 2017 at 13:24
try assigning console.log(a.list[12]) to a variable like this: var z=console.log(a.list[12]) and then use z.name and tell me whats the output after that. — YaSh Chaudhary
– YaSh Chaudhary, Commented Feb 1, 2017 at 16:59

Roy J · Accepted Answer · 2017-02-01 14:57:44Z

2

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

answered Feb 1, 2017 at 14:57

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related