v-for渲染组件时数据丢失

Question

vue做前端项目的时候，v-for循环某个组件，后端数据还没传过来就进行渲染，导致组件无法获取数据显示未定义（不知道是不是这个原因，我猜的）

相关代码如下：

```html
<div v-if="user.isCreator==1||user.isCreator=='1'">
                <h5>作品</h5>
                <el-row>
                    <div v-for="(item, index) in workList" :key="index">
                        <el-col :span="6">
                            <ABook :bookinfo="item"></ABook>
                        </el-col>
                    </div>
                </el-row>
                <el-divider></el-divider>
            </div>
            <h5>书架</h5>
            <el-row>
                <div v-for="(item, index) in collectList" :key="index">
                    <el-col :span="6">
                        <ABook :bookinfo="item"></ABook>
                    </el-col>
                </div>
            </el-row>

```javascript
getUserOrCreator() {
                let map = {}
                map['userid'] = Number.parseInt(this.$route.query.userid)
                let url = "/user/getUserOrCreator"
                postRequestPure(url, map).then(resp => {
                    if (resp.data.responseCode == 200) {
                        this.user = resp.data.data.user
                        this.workList = resp.data.data.workList
                        this.collectList = resp.data.data.collectList
                        console.log(this.workList)
                        console.log(this.collectList)
                    } else {
                        this.$message.error('用户数据获取失败')
                    }
                })
            }

去网上查了一下没有找到类似的问题，不知道该怎么办了Orz，有没有人帮忙看看怎么解决

Answer 1

子组件的bookinfo默认为空数组