I am currently working on developing a blog/articles application using vue.js. This app utilizes axios to retrieve data from my db.json file by making a get request. The objective is to display the selected article's content when it is clicked on from the main articles list. To achieve this, I utilize the id prop to specify which article's data should be fetched. Below is the implementation of the GET request in the ArticleShow component:
ArticleShow.vue
<script>
import APIService from "@/APIService.js";
export default {
props: ["id"],
data() {
return {
article: {}
};
},
created() {
APIService.getArticle(this.id).then(response => {
this.article = response.data;
});
}
};
</script>The axios GET request function resides in the APIService.js file, and here is its code snippet:
APIService.js
import axios from "axios";
const apiClient = axios.create({
baseURL: "http://localhost:5000",
withCredentials: false,
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
});
export default {
getArticle(id) {
return apiClient.get("/articles/" + id);
}
}Despite what seems like correct functionality, an error occurs when attempting to fetch the data:
GET http://localhost:5000/articles/undefined 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js?2d83:16)
at settle (settle.js?467f:17)
at XMLHttpRequest.handleLoad (xhr.js?b50d:62)Investigating the cause revealed uncertainty around whether the id prop might be the culprit. It was defined and passed on correctly within components, but the issue persisted. Assistance in resolving this persistent problem would be greatly appreciated.