显示当前json对象js

Question

我正在做电子商务书店vuejs单页面应用网站。

当我选择时，我需要在json中显示特定书籍中的特定（当前）数据（如标题，封面等）。

{
"books": [
    {
        "title": "The Godfather",
        "cover": "",
        "author": "Mario Putzo",
        "ratting": "95%",
        "price": "30",
        "published": "March 10, 1969",
        "description": ""
    },
    {
        "title": "The Sicilian",
        "cover": "",
        "author": "Mario Putzo",
        "ratting": "98%",
        "price": "25",
        "published": "November 1984",
        "description": ""
    },

我试过了 ：

<div>
    <p>Author: {{currentBook.author}}</p>
    <p>Title: {{currentBook.title}}</p>
    <p>Published {{}}</p>
</div>

var app = new Vue({
    el: "#app",
    data: {
    /// return {
            page: 'home',
            url: "https://api.jsonbin.io/b/5c6d3bf80177dd1751730298",
            books: [],
            currentBook: {},
        }
    }

    bookSelect(string, object) {
        this.page = string;
        this.currentBook = object;
        this.currentBook = this.books.find(obj => obj.title === object.book);
        this.currentBook = this.books.find(obj => obj.author === book);
        this.currentBook = this.books.find(obj => obj.published === book);
        this.currentBook = this.books.find(obj => obj.description === book);
    }
});

Answer 1

data需要是一个功能而不是一个对象。将data更改为函数：

data() {
    /// return {
            page: 'home',
            url: "https://api.jsonbin.io/b/5c6d3bf80177dd1751730298",
            books: [],
            currentBook: {},
        }
    }