[SOLVED] Vuejs – How to display the attribute of an object in a loop with v-for – Stack Overflow

Issue

This Content is from Stack Overflow. Question asked by Bambino

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)



Solution

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>


This Question was asked in StackOverflow by Bambino and Answered by Stefano Nepa It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?