我是 Vue 的新手，所以這個問題可能很愚蠢。我想從我的后端 Rails API 在 Vue 中顯示資料。每次用戶進入網站時，資料都應該顯示出來。為此，我呼叫了位于下方的 GET 端點：
imports.js
const fetchSyncedProductsResultRequest = (self) => {
const jwtToken = self.$store.state.idToken;
return axios
.get(`/api/v1/imports/products/sync_result`, {
headers: {
Authorization: `Bearer ${jwtToken}`,
}
})
.then(response => {
self.unsyncedProducts = response.data['products']
})
};
export {
fetchSyncedProductsResultRequest
};
來自此 GET 的預期 JSON 回應將是：
{:products=>
[{:id=>"611ea9a7392ab50013cf4713", :name=>"2-Tone Hoodie", :code=>"SS22CH013", :result=>nil, :last_sync_at=>nil},
{:id=>"60ec84062f25d400150b351c", :name=>"5-Pocket Denim", :code=>"SS22WP014", :result=>nil, :last_sync_at=>nil},
{:id=>"61966dc83e81dd001731ccd7", :name=>"Zip Shirt Jacket", :code=>"FW22WT001", :result=>nil, :last_sync_at=>nil},
{:id=>"61d5cab6b41408001b0e9376", :name=>"Yankees Satin Varsity Jacket", :code=>"FW22WJ021", :result=>nil, :last_sync_at=>nil}]}
在我的 Vue 檔案中，我得到了：
sync_products.vue
<template>
<div>
<div class="panel">
<div class="panel-body">
<h4>Synchronize products</h4>
<div v-for="product in fetchedProductSyncStatus" :key="product" class="status">
{{product}}
</div>
</div>
</div>
</div>
</template>
<script>
import {
fetchUnsyncedProductsRequest,
} from '../../api/imports'
export default {
name: 'BackboneSyncProducts',
data(){
return{
fetchedProductSyncStatus: []
}
},
}
</script>
<style scoped>
</style>
看起來請求未發送，因為沒有顯示任何內容，并且我在“網路”選項卡中看不到它。是什么決定了這個請求的發送？
uj5u.com熱心網友回復：
您需要將 fetchUnsyncedProductsRequest 函式掛鉤到 Vue 的生命周期，例如創建或掛載。見：https ://vuejs.org/guide/essentials/lifecycle.html
我還將更改函式以僅回傳資料。
const fetchSyncedProductsResultRequest = (token) => {
return axios
.get(`/api/v1/imports/products/sync_result`, {
headers: {
Authorization: `Bearer ${token}`,
}
})
.then(response => {
return response.data['products']
})
};
export {
fetchSyncedProductsResultRequest
};
然后添加創建的鉤子并將回應添加到 fetchedProductSyncStatus
export default {
name: 'BackboneSyncProducts',
data() {
return{
fetchedProductSyncStatus: []
}
},
created () {
const jwtToken = this.$store.state.idToken;
fetchUnsyncedProductsRequest(jwtToken).then(data => {
this.fetchedProductSyncStatus = data
})
}
}
編輯：修復了您評論的自我參考錯誤。關于這一點，將令牌像商店一樣存盤在客戶端中是不好的做法
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/477453.html