数组中的 Vue 3 对象不可访问

Question

您好，我尝试从 Spring 引导中获取数据来访问数组，但它只会显示完整的数组而不是单个值。我无法像用户那样使用 v-for item.attribute 数组来显示从 0 到 3 的单个属性。

报错4次

[Vue 警告]：属性“值”在渲染期间被访问但未在实例上定义。

和4次

[Vue 警告]：属性“属性”在渲染期间被访问但未在实例上定义。

我想显示列出的一个用户的所有数据。

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>

获取的数据如下所示：

{
    "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 工作正常。在 Attribute3 之前我无法访问 Attribute0。 Vue 只显示 items.attribute 数组的完整长度。喜欢：

Image of output

如果有人能帮助我，我将不胜感激。

提前致谢。

Answer 1

value 和 attribute 是 v-for 本地的，应该在内部使用：

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

数组中的 Vue 3 对象不可访问

Vue 3 Objects in an Array not accessible

arrays

vue.js

v-for