在Vue.JS中从API中传递一个项目ID到Router-Link。

Question

我正在使用Axios从API中获取数据，并在一个名为Books的组件中以卡片的形式显示，问题是我希望能够点击一个单一的Book卡片，然后路由器将我带到另一个页面，并从API中获取该书的ID，并显示该书的具体数据，但问题是vue-router接受的是正确的ID，但我得到的是另一本书的数据。http:/localhost:8080books1 )将显示数组中第二个元素的数据。

那么我如何解决这个问题呢？

这是我的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"}]}

Books.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:8080books1 意思是你想看id:1的书（在json的例子中是哈利波特），它是数组中索引0的元素。

但是在Book.vue中，你把这个id放到数组中的index

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;

但是，这可能会在数组的边缘情况下出现一些错误。我建议你可以把它改成 过滤 功能。例如：

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