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>

topdev87 · Accepted Answer · 2021-02-11 14:35:16Z

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>
...

answered Feb 11, 2021 at 14:35

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ace Valdez Over a year ago

Thank you very much sir for this simple and awesome solution. First, I was told that I needed to make a 'for loop' on my fetch request in API and I keep on searching.... but then these really worked! Thank you again sir!!!!!

Collectives™ on Stack Overflow

How to get rid of the Brackets from fetched Nested Array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related