在Vue.js中尋找巢狀鍵的JSON物件的方法
P粉872182023
2023-08-30 09:44:36
<p>我正在嘗試在我的VUEjs應用程式上顯示來自Django API的使用者清單中的使用者。 </p>
<p>我的API中的使用者清單資料：</p>
<pre class="brush:php;toolbar:false;">{
"count": 1,
"next": null,
"previous": null,
"results": [
{
"url": "http://localhost:8000/v1/users/1/",
"username": "admin",
"email": "admin@example.com",
"groups": []
}
]
}</pre>
<p>我的VUE程式碼：</p>
<pre class="brush:php;toolbar:false;"><template>
<div>
<h1> Users </h1>
<div v-for="results in APIData" :result="results" :key="results.username">
<h5>{{ result.username }}</h5>
<p>{{ result.email }}</p>
</div>
</div>
</template>
<script>
import { getAPI } from '../axios-api';
import { mapState } from 'vuex';
export default {
name: 'Users',
computed: mapState(['APIData']),
created() {
getAPI.get('/v1/users/', { headers: { Authorization: 'Bearer ' this.$store.state.accessToken } })
.then(response => {
this.$store.state.APIData = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script></pre>
<p>由於某種原因，儘管我可以看到我的API請求成功並且在網絡選項卡中可以看到數據，但數據沒有顯示在網頁上。顯示使用者的方式正確嗎？還是我漏掉了什麼？ </p>
<p>我對VUEjs還不熟悉，有人可以幫忙嗎？ </p>
問題出在v-for上，你可以嘗試使用：
v-for="results in APIData.results"，因為"results"不是存取器，而是你給陣列中的每個值分配的名稱，而APIData不是一個陣列。如果你只想循環遍歷
APIData中的results：new Vue({ el: '#demo', data() { return { APIData: { "count": 1, "next": null, "previous": null, "results": [ { "url": "http://localhost:8000/v1/users/1/", "username": "admin", "email": "admin@example.com", "groups": [] }, { "url": "http://localhost:8000/v1/users/1/", "username": "user", "email": "user@example.com", "groups": [] } ] } } }, })<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <template> <div> <h1> Users </h1> <div v-for="result in APIData.results" :key="result.username"> <h5>{{ result.username }}</h5> <p>{{ result.email }}</p> </div> </div> </template> </div>