V-for acting weird

I need a simple v-for to render object properties in a list.

<div
   v-if="profileData && profileData.length > 0"
>
  <ul
    v-for="value in profileData"
    :key="value.id"
  >
    <li>{{value.id}}</li>
  </ul>
</div>

In the script:
profileData: {}
I did exactly the same in two other pages (just rendering different objects) and it worked.
With this code, in the console I get value is undefined.
If I remove :key="value.id" (it becomes red in the editor but it still works), and instead of the list items I type only {{ value }}}, then the object properties get rendered ( but in the ugly format of a js object). How can it be? What am I doing wrong?
Thank you

Show us the data you are getting from the get request

Key is needed only if you iterate over multiple objects in your v-for to identify each object as unique.

Here you iterates one object to get multiple properties values, key isn’t needed.

See key information below: https://fr.vuejs.org/v2/guide/list.html#Maintaining-State

This is the object:

1 profileData: {…}
2    home_address_string: (...)
3    home_point: (...)
4    id: 2
5    if_bike_owned: (...)
6    if_cars_owned: (...)
7    if_motorcycle_owned: (...)
8    user: (...)
9    user_age: (...)
10   user_avatar: (...)
11   user_car_powered_by: (...)
12   user_car_type: (...)
13   user_height: (...)
14   user_motorcycle_characteristic: (...)
15   user_sex: (...)
16   user_week_hours_physical_activity: (...)
17   user_weight: (...)
18   user_work_time_from_hour: (...)
19   user_work_time_to_hour: (...)
20   work_address_string: (...)
21   work_point: (...)

Notice that user(...) on line 8 is another object (with few more properties I need to display). This shouldn’t be an issue as I would usually access it using value.user.first_name (assuming first_name is the property contained that I need).

Yes, but everytime I use the v-for the editor gets red and suggests me to bind a key to it.

Which editor? Mine don’t and I don’t expect it to.

Key is not required. Of course as said in documentation, we should use it whenever it’s possible to prevent nodes interaction issue. But it’s definitely not required.

Have a look at this post which discuss about when to use it or not.

Visual Studio Code

Can’t test it but if you really don’t like the idea to not use it in your case and if I understood the fact that you are looping properties of a single object. You probably could use index as key like this:

<ul>
    <li v-for="(value, index) in profileData"
    :key="index"
  > {{ value }} </li>
</ul>

It seems to me to be useless in your case, but it’s a solution like any other

Yes, I am looping properties of an object. One of the properties is another object which contains few properties I need to display). Assuming this other object is called user, I would access it using value.user.propertyName. I tried what you suggested but it doesn’t work.

It works for me: The problem may comes from the fact that your are using v-for on ul tag and try to display the value into li?

It’s weird. As you said, I have

<ul>
  <li
    v-for="(value, index) in profileData"
    :key="index"
  >
    {{ value }}
  </li>
</ul>

Nothing shows up…:thinking:

Can you copy your full profileData from the your browser DevTools and paste it into JSON Formatter? You can create a share link with the button “Save>Save online”, and copy the link which is displayed.

So I can test it in my fiddle

I try, thanks @Maz.

https://jsonformatter.org/f94f9e
UPDATE this is clearer: https://jsonformatter.org/748db9

let me an half hour, read a book to my son and be back :wink:

1 Like

Please do, thank you very much :smiling_face_with_three_hearts:

It works for me. Sorry :laughing:

jsfiddle only said me that you have 2 ‘id’ into your object but overrided the first.

Yes, this is the correct format and works!

@cux If you are trying to display info of multiple users then you need to check the data you are getting from the API call as there is duplicate ID as @Maz pointed out.

I found another problem: your v-if=“profileData && profileData.length > 0” will always returns false: profileData.length will always return ‘undefined’ (= false) because you can’t use .length on object.

To retrieve the length of an object: use this syntax: Object.keys(user).length

Object.keys() returns an array of attributes keys in object. And you can use .length on this array of keys.

So in your case, this is the full works fiddle, you can see in your console, I used this.user.length in mounted(): it returns undefined.

Yes, there’s actually 2 ids (one for the profile and one for the django profile), but one of them should be inside the user object nested in profileData. So I guess the problem is somewhere else… Don’t know where to look at though…