Vuejs - How to display the attribute of an object in a loop with v-for

Bambino 0
Viewed 45

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

enter image description here

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)

vuejs2 vuejs3 vue.js javascript
3 Answers

data.configuration looks like an object and not an array.

you should try to replace

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

by

<td>
  {{ data.configuration.format }}
</td>
Stefano Nepa0

You have probably an error in the last interpolation {{ element.format }} - you are accessing field format of elements of data.configuration, you should remove .format (since it's undefined). You can see working example of what you are trying to achieve in this codesandbox https://codesandbox.io/s/angry-chatterjee-nzgwuv?file=/src/App.vue

Jakub Jun0

I can't explain why.. but! I show it to a friend, retry the same thing as I try the morning and it works..

The answer is

<td>{{ data.configuration.format }}</td>

Thanks for your answers! Have a nice day

Bambino0
Related