从 Vue.JS 中的 API 将项目 ID 传递给 Router-Link

Question

我正在使用 Axios 从 API 获取数据，并将它们显示为名为 Books 的组件中的卡片，问题是我希望能够单击单个 Book 卡片，然后路由器将我带到另一个带有来自 API 的书 id 的页面并显示书的特定数据，但问题是 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>

Book.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;

但是，这可能会在数组的边缘情况下产生一些错误。我建议您可以将其更改为 filter 功能。例如：

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