无法读取Vue中undefined的属性0

时间:2018-11-13 17:57:29

标签: vue.js vuex

所以我知道这个问题已经被问过几次了,但是我似乎找不到适合我的情况的解决方案。我正在使用v-for遍历对象数组,但是我也正在访问每个对象嵌套数组的数据。

请注意*最初,我是使用原始数据Between lugs: 20 mm 进行循环浏览,但是我转而使用计算来查看它是否会对到目前为止没有成功有所帮助

这是getter

v-for

这是计算出的属性

<tbody class="client-info table-bordered">
   <tr v-for="(user, index) in computedUsers"  :key="index" v-if="users.length > 0">
   <td class="text-capitalize">{{ user.user }}</td>
   <td>{{ user.email }}</td>
   <td>{{ user.role.name }}</td>// My issue is at this line
   <td class="text-center"><button class="btn btn-sm btn-secondary">Edit</button></td>
   </tr>
</tbody>

现在没有问题了,如果我只是加载页面,但是如果我提交了一个将新对象添加到数组的突变,则会收到computed: { ...mapGetters(['users']), computedUsers() { if(this.users.length > 0 ) { const index = 0 return this.users.map((user) =>({user: user.name, email: user.email, role: user.roles[index]})) } } }, 的警报。将不胜感激!

1 个答案:

答案 0 :(得分:0)

要解决我的问题,我需要在return response上包含嵌套的数据数组。

当它运行v-for而没有包含的roles数组时,它显然将不存在,因为我的返回响应只发送了user对象。

所以对于那些熟悉Laravel的人,我改变了

return response($user, 200);

对此

return response($user->load('roles'), 200);