Vue遇到的问题

事情是这样的。

我想写一个多级分类的功能。

我预想的数据格式如下，

const arr = [
    {
        name: "热门", //一级分类名
        sliderPic: classifySlider1,//一级分类图片展示
        typeList: [
            {
                name: "热门1",
                icon: "",
                router: ""
            }
        ],//二级分类列表
     },
];//一级分类数组

然后异步获取数据，并使用computed分离一级二级目录。

computed: {
    secondLevel(){
        //this.highIndex是当前被选中的一级分类的索引
        if(this.classifyList[this.highIndex]){
            //若当前索引被选中，返回相应的二级分类
            return this.classifyList[this.highIndex];
        }
    }
},
async mounted(){
    //这个方法获取到的数据，就是如上所述的数据格式。
    this.classifyList = await classifyService.getClassifyList();
}

然后在页面渲染。

<img class="classify-pic" :src="secondLevel.sliderPic" alt="">

而后，出现了下面的错误：

标题

虽然在控制台飘红，但是却可以正常运行。

经过分析，我将computed的值修改如下。

computed: {
    secondLevel(){
        let obj = {
            name: '',
            sliderPic:'',
            typeList: [],
            ...this.classifyList[this.highIndex]
        }
        return obj;
    }
},

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

那么究竟是因为什么呢？