VueJS 不在组件上显示数据，而是在控制台上显示

Question

我有两个页面 - Books 和 Book。单击图书页面上的单个项目后，我试图在我的图书页面上显示一些数据。

我已设法获取 JSON 文件，其中列出了图书页面上的所有项目以及 link 通过 id 导航到图书页面。

我面临的问题是无法获取图书页面上 JSON 返回的数据。数据已隐藏，但 console.log(response.data) 在控制台上显示响应数据没有问题。

这是来自图书页面的路线-link，它导航一本书：

<router-link :to="'/books/' + book.id"> Link </router-link>

这是我的 Book 组件脚本

<script>
import LibraryDataService from "../services/LibraryDataService";

export default {
  name: "Book",
  data() {
    return {
      book: "",
    };
  },

  methods: {
    getBook(id) {
      LibraryDataService.get(id)
        .then((response) => {
          this.book = response.data;
          console.log(response.data);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },

  mounted() {
    this.getBook(this.$route.params.id);
  },
};
</script>

任何帮助将不胜感激

Answer 1

尝试等待响应：

async mounted() {
  await this.getBook(this.$route.params.id);
},

Answer 2

我已经能够通过将 getBook 方法上的 response.data 修改为 this.book = response.data[0];

来解决问题

VueJS 不在组件上显示数据，而是在控制台上显示

VueJS doesn't show data on a component but shows on console

json

vue.js

vue-router

vuejs3