How to get rid of the Brackets from fetched Nested Array

Question

Good day to you guys. May I seek your help. I'm stuck figuring out on how to get rid of the Brackets and Separate each data from my nested array. Here's my code:

<template>
  <v-data-table
    :headers="headers"
    :items="teams"
  >
    <template v-slot:body="{ items }">
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.business_Units }}</td>
          <td>
            <v-icon small class="mr-2" @click="editRole(item)">
              mdi-pencil
            </v-icon>
          </td>
          <td>{{ item.status | boolean }}</td>
        </tr>
      </tbody>
    </template>
  </v-data-table>
</template>
<script>
export default {
//..... chunk of my code on how to request from the api
  created() {
    SparrowService.getTeams()
      .then((response) => {
        this.loading = false;
        this.teams = response.data;
      })
      .catch((error) => {
        console.log(error.response);
      });
  },
};
</script>

Answer 1

item.business_Units is the array, so you need to take some action to join to the string.

Refer to Array.join()

...
       <td>{{ item.business_Units.join(", ") }}</td>
...