嗨,我嘗試通過從 Spring boot 獲取資料來訪問陣列,但它只會顯示完整的陣列而不是單個值。我無法使用 v-for item.attribute 陣列來顯示從 0 到 3 的單個屬性,就像我由用戶所做的那樣。
錯誤資訊是 4 次
[Vue 警告]:在渲染期間訪問了屬性“值”,但未在實體上定義。
和 4 次
[Vue 警告]:在渲染期間訪問了屬性“attribute”,但未在實體上定義。
我想顯示列出的一位用戶的所有資料。
用戶資料顯示.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>
獲取的資料如下所示:
{
"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 陣列的完整長度。喜歡:
輸出影像
如果有人可以幫助我,我將不勝感激。
提前謝謝。
uj5u.com熱心網友回復:
value并且attribute是本地的v-for并且應該在內部使用:
<p v-for="(value,attribute) in item.attribute" :key="attribute">
{{value}} : {{attribute}}
</p>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/372767.html
