Блог

Я пытаюсь создать (с vue.js помощью) приложение для блога / статей, которое использует axios для запроса данных из моего db.json файла с get request помощью . Я хочу, чтобы он показывал данные из этой статьи после того, как на нее нажали из списка основных статей ==> Я использую id prop , чтобы он знал, какие данные статьи нужно получить. Здесь я вызываю свой get-запрос (get-запрос находится в другом файле, продолжайте читать).

 ArticleShow.vue
<script>
import APIService from "@/APIService.js";
export default {
  props: ["id"],    // "id" has been passed as a prop when I import this file to its parent
  data() {
    return {
      article: {}
    };
  },
  created() {
    APIService.getArticle(this.id).then(response => {
      this.article = response.data;
    });
  }
};
</script>
 

Это запрос axios GET, который я использую (он находится внутри APIService.js файл)

 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);
  }
}
 

Я думал, что этот код будет работать, но в моем браузере я получаю следующую ошибку:

 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)
 

Я попытался уловить ошибку, но не смог получить никакой полезной информации о том, откуда она взялась и как я мог ее исправить. Я предположил id prop , что это может быть причиной проблемы, но не уверен. В родительском ArticleShow компоненте компонента я определяю id prop при отображении ArticleShow в маршрутизаторе-link.

 ArticleCard.vue
<router-link
      class="article-link"
      :to="{ name: 'ArticleShow', params: { id: article.id } }"
      :article="this.article"
    >
 

А затем снова в родительском элементе Articlecard.vue (предыдущем компоненте)

 Home.vue
<ArticleCard
      v-for="article in articles"   // I imported *articles* from the vuex store
      :key="article.id"
      :article="article"
      class="ArticleCard"
></ArticleCard>
 

Все еще не уверен id prop , действительно ли это корень проблемы здесь. В любом случае, пожалуйста, помогите, если сможете, по этой проблеме, поскольку она продолжается уже довольно давно, любая помощь приветствуется.

Ошибка 404 означает, что этот URL-адрес не существует: http://localhost:5000/articles/undefined

Таким образом, это означает, что вы не передали никакого id реквизита ArticleShow компоненту