如何解决:[Vue警告]:在vue.js 2上渲染组件时出错?

时间:2017-02-01 12:25:05

标签: javascript vue.js laravel-5.3 vuejs2 vue-component

我的组件代码( SearchResultView.vue )是这样的:

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

当我在控制台上检查:console.log(a.list[12])时,结果为:

enter image description here

我想要显示名称

的值

我试着这样:

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

在控制台上,存在如下错误:

  

[Vue警告]:在C:\ xampp \ htdocs \ chelseashop \ resources \ assets \ js \ components \ SearchResultView.vue呈现组件时出错:

     

未捕获的TypeError:无法读取属性&#39; name&#39;未定义的

如何解决错误?

1 个答案:

答案 0 :(得分:2)

因为它是计算的,所以它的值可能会在程序的生命周期中发生变化。在尝试从中获取成员之前,您应该检查以确保+存在。

a.list[12]