如何解決：[Vue警告]：在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警告]：在C：\\ xampp \\ htdocs \\ chelseashop \\ resources \\ assets \\ js \\ components \\ SearchResultView.vue渲染組件時出錯：

未捕獲的TypeError：無法讀取未定義的屬性“名稱”

我該如何解決錯誤？

Answer 1

由於它是經過計算的，因此它的值可能會在程序生命周期中發生變化。 在嘗試從中獲取成員之前，應檢查並確保a.list[12]存在。

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