v-for遍历时候找不到里面的属性

Question

数据类型是这样的：

dataList: [
    {
        id: 1,
        status: 1,
        staff: {
            id: 12,
            name: '管理员',
            phone: '12345676879'
        }
    },
    {
        id: 1,
        status: 1,
        staff: {
            id: 12,
            name: '管理员',
            phone: '12345676879'
        }
    }
]

此时我要遍历这个数组，来将里面的数据渲染到页面上：

<tr v-for="item in dataList" :key="item.id">
    <td>{{item.id}}</td>
    <td>{{item.staff.name}}</td>
</tr>

死活都拿不到staff中的name，一直报错"TypeError: Cannot read property 'name' of null"
有没有大神遇到过这种问题，该怎么解决啊

Answer 1

试试(item.staff || {}).name

Answer 2

有检验过是否存在某一项的item.staff为{}的情况吗？

Answer 3

有的item.staff是undefined吧

Answer 4

dataList的值是动态获取的么，我把你的dataList直接粘贴到data函数中，可以拿到staff中name的数据。

Answer 5

你的数据应该是后台返回的，没有做处理，因此item.staff如果返回的null值，尽管它是被typeof检测为object,但是不能对其进行对象的读值操作，因此，你需要加一个判断，判断该值是否存在，并且该值的name属性是否存在，例如:

<td>{{ item.staff && item.staff.name ? item.staff.name : '' }}</td>

Answer 6

先不管其它，你那个key绑定的值就有问题，绑定的id不唯一，还不如使用index呢，例如像这样：

<tr v-for="(item, index) in dataList" :key="index">