Bootstrap Vue b-table displaying nested object

I'm trying to list the drivers in b-table.

This gives me the correct name of the driver: console.log(this.orders[0].order_drivers[0].populated_driver.user.username)

But when I want to display it on the table, it gives "data.item.order_drivers[0] is not defined" error.

Here's my code:

<b-table :items="orders"
             :fields="fields"
             :per-page="perPage"
             :current-page="currentPage"
             :filter="filter"
             :filter-function="filterDate"
             :sort-by.sync="sortBy"
             :sort-desc.sync="sortDesc"
             sort-icon-left
             small
             >
      <template #cell(status)="data">
        <div class="text-nowrap">
          <span class="align-text-top text-capitalize">{{ data.item.status }}</span>
        </div>
      </template>
      <template #cell(order_number)="data">
        <div class="text-nowrap">
          <span class="align-text-top text-capitalize">{{ data.item.order_number}}</span>
        </div>
      </template>
      <template #cell(deliver_date)="data">
        <span class="align-text-top text-capitalize">{{ data.item.deliver_date }}</span>
      </template>
      <template #cell(pickup_date)="data">
        <span class="align-text-top text-capitalize">{{ data.item.pickup_date }}</span>
      </template>
      <template #cell(subtotal)="data">
        <div class="text-nowrap">
          <span class="align-text-top text-capitalize">{{ data.item.subtotal }}</span>
        </div>
      </template>
      <template #cell(tip)="data">
        <div class="text-nowrap">
          <span class="align-text-top text-capitalize">{{ data.item.tip_from_restaurant }}</span>
        </div>
      </template>
      <template #cell(additional_tip)="data">
        <div class="text-nowrap">
          <span class="align-text-top text-capitalize">{{ data.item.extra_tip_from_restaurant }}</span>
        </div>
      </template>
      <template #cell(tfr_tip)="data">
        <div class="text-nowrap">
          <span class="align-text-top text-capitalize">{{ data.item.tip_from_tfr }}</span>
        </div>
      </template>
      <template #cell(tfr_additional_tip)="data">
        <div class="text-nowrap">
          <span class="align-text-top text-capitalize">{{ data.item.extra_tip_from_tfr }}</span>
        </div>
      </template>
      <template #cell(driver)="data">
        <div class="text-nowrap">
          <span class="align-text-top text-capitalize">{{ data.item.order_drivers[0].populated_driver.user.username}}</span>
        </div>
      </template>
</b-table>

And this is what axios returns: Response

UPDATE:

I've added v-if and v-else as suggested and worked for me!

<div class="text-nowrap">
<span class="align-text-top text-capitalize" v-if="orders[data.index].order_drivers.length!==0" >{{ data.item.order_drivers[0].populated_driver.user.username}}</span>
          <span  class="align-text-top text-capitalize" v-else>None.</span>
</div>