I'm facing an issue where I am trying to retrieve data using the axios get request and then updating it based on the response of another axios get request. However, I am unable to display the data from the second request.
The following is a snippet of the code:
// api.js
// fetch items - first API call
fetchItems() {
const ITEMS_ENDPOINT = `${ROOT_URL}/items`;
return axios.get(ITEMS_ENDPOINT, config);
},
// fetch items info - 2nd API call
fetchItemsInfo(itemId) {
const ITEMS_INFO_ENDPOINT = `${ROOT_URL}/items/${itemId}`;
return axios.get(ITEMS_INFO_ENDPOINT, config);
},
// Vue component
methods: {
async fetchItems() {
const res = await api.fetchItems();
this.items = res.data;
console.log(this.items);
},
updateItems() {
this.items.forEach(async (item) => {
const itemId = item.id;
const res = await api.fetchItemsInfo(itemId);
const info = res.data;
console.log(info);
if (item.id === info.id) {
item.x = info.x;
console.log(item);
}
});
},
},
async created() {
await this.fetchItems();
this.updateItems();
console.log(this.items);
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.id }} || {{ item.a }} || {{ item.x }}
</li>
</ul>
The issue here is that only the data from the first API call is being displayed, not from the second call.
Logging the data within the created hook shows the expected output in the console.
When utilizing a click method to trigger the updateItems function, the data renders correctly. However, I want it to load on page load.
The behavior remains unchanged even when updating the Vuex state from updateItems and rendering the state getters.
How can I ensure that the data from the second call is also rendered?
Thank you in advance.