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

Question

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

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)

I don't see the element.format in the console.log result. That key exists in all the objects? Also, you could set up a reproducible example using vue playground - sfc.vuejs.org. Now you know it for next times (: — ericmp
– ericmp, Commented Sep 19, 2022 at 11:12
So seems in some objects format is defined and in other ones it isn't, right? — ericmp
– ericmp, Commented Sep 19, 2022 at 11:40
I'm not sure... in the console.log I see a value for format or maybe I don't understand — Bambino
– Bambino, Commented Sep 19, 2022 at 11:52
You have to be sure. Check it. Also, as said, if you set up a reproducible example + vue playground, ppl will help you more easily. also, provide some input examples and your expected outputs — ericmp
– ericmp, Commented Sep 19, 2022 at 11:55

kissu · Accepted Answer · 2022-09-19 13:38:46Z

1

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>

edited Sep 19, 2022 at 13:38

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Sep 19, 2022 at 12:21

Stefano Nepa

5001 gold badge7 silver badges14 bronze badges

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

Comments

Jakub Jun · Accepted Answer · 2022-09-19 11:16:51Z

1

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

edited Sep 19, 2022 at 11:16

answered Sep 19, 2022 at 11:15

Jakub Jun

214 bronze badges

1 Comment

Bambino Over a year ago

Thx for your answer :) I'll try but data.configuration have many attribute.. not only "format" so I have to focus the one I want

Abdulla Nilam · Accepted Answer · 2022-09-23 05:14:23Z

0

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

edited Sep 23, 2022 at 5:14

Abdulla Nilam

39.7k18 gold badges85 silver badges115 bronze badges

answered Sep 19, 2022 at 12:30

Bambino

133 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related