Не удается прочитать свойство 0 неопределенного в Vue

Question

Итак, я знаю, что этот вопрос задавался несколько раз, но я не могу найти решение для моего случая. Я использую v-for для циклического прохождения массива объектов, но я также обращаюсь к данным для вложенного массива каждого объекта.

Примечание * Первоначально я использовал исходные данные 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]}))
       }  
    }
  },

Теперь нет никаких проблем. Если я просто загружаю страницу, однако, если я фиксирую мутацию, которая добавляет новый объект в массив, я получаю сигнал тревоги, что cannot read property 0 of undefined. любая помощь будет очень оценили!

Answer 1

Чтобы решить мою проблему, мне нужно было включить вложенный массив данных в мой return response.

Когда он запускает v-for без включенного массива roles, он, очевидно, не существует, потому чтомой ответ был только отправкой объекта user.

Так что для тех, кто знаком с Laravel, я изменил

return response($user, 200);

на этот

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