將項目 ID 從 Vue.JS 中的 API 傳遞給 Router-Link

Question

我正在使用 Axios 從 API 獲取數據，並將它們顯示為名為 Books 的組件中的卡片，問題是我希望能夠單擊單個 Book 卡片，然后路由器將我帶到另一個頁面來自 API 的 book id 並顯示 Book 特定數據，但問題是 vue-router 接受了正確的 ID，但我得到了另一本書的數據。 例如：（ http://localhost:8080/books/1 ）將顯示數組第二個元素的數據。

那么我該如何解決呢？

這是我的 API：

{"error":false,"books":[{"id":"1","Title":"Harry Potter","Author":"J. K. Rowling","Price":"45"},{"id":"2","Title":"To Kill a Mockingbird","Author":"Harper Lee","Price":"40"},{"id":"3","Title":"Almukadimah","Author":"Ibn Khaldun","Price":"50"},{"id":"5","Title":"Into The Wild","Author":"Anonymous","Price":"15"}]}

書籍.vue

<template>
  <div class="container pt-5">
    <div class="row">
      <div class="col-md-4 col-6 mb-3" v-for="book in bookList" :key="book.id">
        <router-link :to="{ name: 'book', params: { id : book.id-1 }}">
          <div class="card">
            <div class="card-header bg-primary text-text-capitalize d-flex flex-column justify-content-center align-items-center">
              <h1 class="card-title text-center text-light">{{ book.Title }}</h1>
            </div>
            <div class="card-body">
              <p>Irure laboris voluptate dolor officia mollit dolore aute qui tempor qui ut consectetur consequat pariatur laborum irure cupidatat minim officia non do do nulla dolore mollit nisi laboris qui officia sunt anim id veniam cupidatat et reprehenderit anim.</p>
            </div>
            <div class="card-footer">
              <span class="font-weight-bolder">Author :<label class="font-font-weight-normal ml-2"> {{ book.Author }} </label></span>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Books",
  data: function() {
    return {
      bookList: []
    }
  },
  mounted: function() {
    this.getBook();
  },
  methods: {
    getBook() {
      axios.get('http://localhost/VUEJS/src/Backend/api.php?action=read')
        .then((res) => {
          if (res.data.error) {
            this.errorMsg = res.data.message;
          } else {
            this.bookList = res.data.books;
          }
        });
    }
  }
}

</script>
<style scoped>
.card{
  transition: all 0.3s ease;
}
.card:hover{
  box-shadow: 1px 0px 25px 0 rgba(189, 189, 185, 0.3);
  transform: translateY(-4px);
}
.card-header {
  height: 165px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
a{
    color: #000;
    text-decoration: none;
  }
a:hover{
  text-decoration: none;
}

</style>

圖書.vue

<template>
  <div class="text-center">
    <h1 class="text-light text-center bg-dark py-3">{{ bookTitle }}</h1>
    <p>LorAute est velit quis exercitation.Voluptate in nisi commodo aute.Nulla sint ut nostrud deserunt.
      Ad et qui amet nulla culpa ex sunt culpa magna consequat quis fugiat aliqua dolore. Elit ex duis laborum veniam sunt do.
      Aliqua mollit fugiat duis non qui elit nulla non occaecat ad reprehenderit.Anim irure nulla reprehenderit nulla officia reprehenderit voluptate excepteur.Culpa exercitation adipisicing cillum ipsum dolor.
      Minim mollit dolor exercitation ex incididunt.Sit ad duis laborum dolore sit commodo voluptate laboris ullamco consequat.
    </p>
    <hr class="bg-info">
    <span>{{ bookAuthor }}</span>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      id: this.$route.params.id,
      bookTitle: '',
      bookAuthor: ''
    }
  },
  mounted: function() {
    this.getBook();
  },
  methods: {
    getBook() {
      axios.get('http://localhost/VUEJS/src/Backend/api.php?action=read')
        .then((res) => {
          if (res.data.error) {
            this.errorMsg = res.data.message;
          } else {
            this.bookTitle = res.data.books[this.id].Title;
            this.bookAuthor = res.data.books[this.id].Author;
          }
        });
    }
  }
}

</script>

Answer 1

如果我對您的理解正確，那么當您訪問http://localhost:8080/books/1時，意味着您想查看 ID 為 1 的書（哈利波特在 json 示例中），它是數組中索引為 0 的元素。

但是在 Book.vue 中，您將此 id 放入數組索引中

this.bookTitle = res.data.books[this.id].Title; // it looks for res.data.books[1]
this.bookAuthor = res.data.books[this.id].Author;

所以你需要把它改成

this.bookTitle = res.data.books[this.id - 1].Title; // res.data.books[0]
this.bookAuthor = res.data.books[this.id - 1].Author;

但是，這可能會在數組的邊緣情況下產生一些錯誤。 我建議您可以將其更改為過濾function。 例如：

this.bookTitle = res.data.books.filter(book => book.id === this.id)[0].Title;