Vue 3 Objects in an Array not accessible

Question

Hi i try to access an Array from fetch Data from Spring boot, but it will only show the complete Array instead of single values. I cant access with v-for the item.attribute array to show the single attributes from 0 to 3 like i did by user.

Error message is 4 times

[Vue warn]: Property "value" was accessed during render but is not defined on instance.

and 4 times

[Vue warn]: Property "attribute" was accessed during render but is not defined on instance.

I Want to show the all the Data from one User listed.

UserDataShow.vue

<template>
<div>
    <div v-for="user in users" :key="user.id">
    <h2>{{user.name}}</h2> 
    <div class ="row">
        <div v-for="(item,index) in user.items" :key="index">
           <div key="item" class="item">
            <p class="text" key="itemname">{{item.name}}</p>
            <p class="text" key="itemType">{{item.type}}</p>
            <p class="text" key="itemUniqueType">{{item.uniquetype}}</p> 
            <p class="text" key="">{{item.attribute}}</p>// shows the complete Array
            <p v-for="(value,attribute) in item.attribute" :key="attribute"></p>
            <p>{{value}} : {{attribute}}</p> // do not work just shows : on html.
           </div>
    </div>
   </div>
</div>
   
</div>
</template>

<script>
export default {
name: 'UserDataShow',
data:() => ({
   // users: []
    groupname: '',
    parameter: [],
    propGroupid: '',
    players: []
   
}),
mounted() {
    if (this.users.length == 0) {
        this.$axios.get("/toFetchFromSpringBootAdress/"+this.$route.params.id).then((response) => (this.users= response.data))
        
    }
    
}
</script>

The fetched Data looks like:

{
    "1": {
        "name": "User1",
        "user_id": 1,
        "items": 
        [
            {
                "name": "xyz",
                "id": null,
                "type": "typ1",
                "uniquetype": "uniquetype1",
                "attribute": 
                [
                    {
                        "Attribute0": "special 1",
                        "Attribute1": "special 2",
                        "Attribute2": "special 3",
                        "Attribute3": "special 4"
                    }
                ]
            }           
          ]
        },
    "2": {
        "name": "user2",
        "player_id": 2,
        "items": [],
        "characters": null
    },
    "4": {
        "name": "user3",
        "player_id": 4,
        "items": [],
       }
}

Everythink works fine until i reach the first attribute Array. I cant access Attribute0 till Attribute3. Vue shows me only the full lenght of the Array of items.attribute. like:

Image of output

Would appreciate if someone could help me.

Thx in advance.

Notice that from this data structure value is an object, and attribute is index. — Estus Flask
– Estus Flask, Commented Dec 3, 2021 at 13:57
Thx. that works fine. Another question. Is it possible to iterate over all attributes from 0 to 3. Sometimes there are more than 4 attributes or should i just add {{value.Attribute0}} to {{value.AttributeXX}}. So that just the possible AttributeX will shown :) — ASP.NOOB
– ASP.NOOB, Commented Dec 3, 2021 at 14:23
Hard-coding properties to a template is not really bad if there's not many of them. Or you can transform them with a method e.g. values0To3(value), and output with v-for. — Estus Flask
– Estus Flask, Commented Dec 3, 2021 at 14:31

Estus Flask · Accepted Answer · 2021-12-03 13:54:51Z

1

value and attribute are local to v-for and should be used inside:

<p v-for="(value,attribute) in item.attribute" :key="attribute">
  {{value}} : {{attribute}}
</p>

answered Dec 3, 2021 at 13:54

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

Collectives™ on Stack Overflow

Vue 3 Objects in an Array not accessible

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related