时间戳

首页 > 解决方案 > 从 Vue.JS 中的 API 将项目 ID 传递给 Router-Link

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

问题描述

我正在使用 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>

标签： javascriptvue.jsvue-router

解决方案

如果我理解正确，那么当您访问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;

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

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

推荐阅读