Vue 3 Objects in an Array not accessible-CodePudding

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" >
            <p  key="itemname">{{item.name}}</p>
            <p  key="itemType">{{item.type}}</p>
            <p  key="itemUniqueType">{{item.uniquetype}}</p> 
            <p  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.

CodePudding user response：

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>