如何解决：[Vue 警告]：在 vue.js 2 上渲染组件时出错？答案

【问题标题】：How to solve : [Vue warn]: Error when rendering component on the vue.js 2?如何解决：[Vue 警告]：在 vue.js 2 上渲染组件时出错？
【发布时间】：2017-06-18 04:47:00
【问题描述】：

我的组件代码（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])，结果：

我要显示名称的值

我尝试这样：

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

在控制台上，存在这样的错误：

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

未捕获的类型错误：无法读取未定义的属性“名称”

我该如何解决这个错误？

【问题讨论】：

由于这是一个渲染问题，您需要将您使用的模板提供给我们。很可能您在加载数据之前访问数据或传递错误属性
console.log(JSON.stringify(a.list[12]))的回复是什么？
@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"}
正如@FrankProvost 所说，请添加您的模板，这似乎是问题所在，而且我想在您的list 函数结束时您正在返回一个值，但请您添加整个函数的主体？
尝试将console.log(a.list[12]) 分配给这样的变量：var z=console.log(a.list[12])，然后使用z.name 并告诉我之后的输出。

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

【解决方案1】：

因为它是一个计算值，所以它的值可能会在程序的生命周期内发生变化。在尝试从中获取成员之前，您应该检查以确保 a.list[12] 存在。

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

【讨论】：