In my vuejs project I have an empty “CatalogItems” array. Thanks to a method I push data into this array, and when I do

console.log(this.catalogItems)

We see that my table contains 30 objects.

These objects contain several attributes (id, locale, ..), and among these attributes there is an object named “configuation” which contains the attribute “format”.

Console.log result

On my front I have a loop with a v-for, its purpose is to display the different attributes of each object in my “CatalogItems” array.

<tr v-for="data in catalogItems" :key="data.value">
    <td>{{ data.id }}</td>
    <td>{{ data.name }}</td>
    <td>{{ data.locale }}</td>
    <td>{{ data.configuration }}</td>
    <td>{{ data.date }} <br> {{ data.heure }}</td>
    <td class="sousMenuTable flex justifyContentBetween">
      <span class="flex alignItemsCenter justifyContentCenter">{{ data.nombreDetecte }}</span>
      <span class="flex alignItemsCenter justifyContentCenter">{{ data.nombreInsere }}</span>
      <span class="flex alignItemsCenter justifyContentCenter">{{ data.nombreRejete }}</span>
    </td>
    <td>{{ data.type }}</td>
    <td>{{ data.load_frequency }}</td>
    <td class="marginRight15">
      <div class="ti-pencil flex justifyContentCenter alignItemsCenter"></div>
    </td>
    <td>
      <div class="switchOnOff flex alignItemsCenter" :data-etat="data.etat" @click="switchStatus">
        <div class="circle"></div>
        <span class="bold uppercase">{{ data.etat }}</span>
      </div>
    </td>
  </tr>

My problem is that on my front end I can’t display the “format” attribute of my “configuration” object present in my “CatalogItems” object array.

I tried to do this :

<td v-for="element in data.configuration">
  {{ element.format }}
</td>

But I have no visible results (nor any errors)