如何解决：[Vue warn]: 在 vue.js 2 上渲染组件时出错？

Question

我的组件代码（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 warn]: Error when rendering component at C:\xampp\htdocs\chelseashop\resources\assets\js\components\SearchResultView.vue:

Uncaught TypeError: Cannot read property 'name' of undefined

如何解决错误？

Answer 1

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

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

如何解决：[Vue warn]: 在 vue.js 2 上渲染组件时出错？

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

javascript

vue.js

vue-component

laravel-5.3

vuejs2