Vue Element-UI 组件无法绑定 data 中包含的对象的属性

Question

大致代码：

<template>
    <div>
        <el-collapse v-model="user">
            <el-collapse-item title="用户名">
                {{user.username}}
                <!-- <el-input v-model="user.username" placeholder=""></el-input> -->
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: 'username'
      }
    }
  }
}
</script>

明明 data() 返回的对象中的 username 属性可以绑定到 template 上，但 user.username 却不能绑定，报错如下，但是不放在 el-container 中就能正常绑定，感觉是 el ui 的问题，el ui 有什么奇怪的坑么？

vue.esm.js?efeb:591 [Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, String, Number, got Object.

found in

---> <ElCollapse>
       <UserInfo> at src/components/user/user-info.vue
         <App> at src/App.vue
           <Root>

去看了 Chrome 的 Vue 面板，直到 ElCollapse 组件还有吾辈自定义的 UserInfo 组件中包含的 user 属性，但到了 ElCollapseItem 组件里就没有了，这难道是 Element-UI 的坑么？

不明白发生了什么，有什么解决方案么？（ｖ＾＿＾）ｖ

Answer 1

<el-main height="" v-for="(data,index) in user">
用户名: <span>{{data.username}}</span>
</el-main>

user: [{ username: 'username' }]

我是这么解决的！

Answer 2

Cannot read property 'username' of undefined
根据错误提示判断，在代码运行某个时段，this.user被赋值为undefined了，先检查一下。