For the life of me I can not figure out what is happening here. It was working initially but when I added some more code it stopped.
I have basic "book library" created through a youtube tutorial. It was working initially until I added a more of my own code. What should happen is the page should load and show a grid of books (these are currently being created in the code on page load). The book data comes from a fetch to a google API. All this is working, but when the page loads, you see it flash, and then everything is hidden until I hit the "HIDE BOOKS" toggle button to first hide and then reshow the grid. I can also cycle between list view and grid view using the other button, to make it work. But I want the grid of books to show without having to press any buttons. All my flags are set to true, so everything SHOULD be showing. Kind of hard to explain but the code is pretty simple. I have it working on a js fiddle so you can see.
https://jsfiddle.net/jedensuscg/ynmbrauc/1/
HTML
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/styles.css"> <title>Document</title> </head> <body> <div id="app"> <button @click="toggleShowBooks"> <span v-if="showBooks">Hide Books</span> <!-- v-if removes from DOM--> <span v-else>Show Books</span> </button> <button @click="toggleGrid"> <span v-if="showGrid">List View</span> <!-- v-if removes from DOM--> <span v-else>Grid View</span> </button> <div id="book-display" v-if="showBooks"> <div id="grid-view" v-if="showGrid"> <div v-for="book in books" class="box"> <p></p> <h3></h3> <p> </p> <p> Pages: </p> <p> Read Book? <span v-if="book.isRead == true">Yes</span> <span v-else="book.isRead == true">No</span></p> <img class="book-cover" :src="book.cover" alt=""> </div> </div> <ul id="list-view" v-if="!showGrid"> <li v-for="book in books"> <h3></h3> <p> </p> <p> Pages: </p> <p> Read Book? <span v-if="book.isRead == true">Yes</span> <span v-else="book.isRead == true">No</span> </p> </li> </ul> </div> <br> <br> <script src="https://unpkg.com/vue@next"></script> <script src="js/app.js"></script> </body> </html> JS
isbnURL = "https://www.googleapis.com/books/v1/volumes?q=title:"; listDiv = document.querySelector("#list"); titleInput = document.querySelector("#title"); authorInput = document.querySelector("#author"); pagesInput = document.querySelector("#pages"); isReadCheck = document.querySelector("#is-read"); function Book(title, author, isRead = false, pages = 0, isbn = "no isbn", cover = 'no image') { this.title = title; this.author = author; this.pages = pages; this.isRead = isRead; this.isbn = isbn; this.cover = cover; } Book.prototype.info = function () { isRead = this.isRead ? "Has been read." : "Has not been read"; return `${this.title} by ${this.author}, ${this.pages} pages. ${isRead}`; // return { // title: this.title, // author: this.author, // pages: this.pages, // isRead: this.isRead, // }; }; async function getBookInfo(title) { let isbn = '' let pageCount = '' let coverLink = '' await fetch(isbnURL + title) .then((response) => { return response.json(); }) .then((data) => { isbn = data.items[0].volumeInfo.industryIdentifiers[0].identifier; pageCount = data.items[0].volumeInfo.pageCount coverLink = data.items[0].volumeInfo.imageLinks.thumbnail }) .catch((e) => { console.log(e); }); return { isbn, coverLink, pageCount } } async function addBook(title, author, isRead = false) { let validBook = true; isbn = '' library.forEach((book) => { if (book.title == title) { validBook = false; } }); if (validBook) { bookData = await getBookInfo(title).then(({isbn, pageCount, coverLink}) => { return { isbn, pageCount, coverLink, } }); console.log(isbn) const newBook = new Book(title, author, isRead, bookData.pageCount, bookData.isbn, bookData.coverLink); library.push(newBook); console.log(newBook); } else { console.log("Duplicate Book"); } } addBook("The Hobbit", "J.R.R. Tolkien", true); addBook("A Game of Thrones", "George R.R Martin", true); addBook("War and Peace", "Leo Tolstoy", false); addBook("Harry Potter and the Sorcerers Stone", "J.K Rowling", true); addBook("Jurassic Park", "Michael Crichton", true); const app = Vue.createApp({ data() { return { showBooks: true, showGrid: true, books: library, }; }, mounted: function() { }, methods: { toggleShowBooks() { this.showBooks = !this.showBooks; }, toggleGrid() { this.showGrid = !this.showGrid; console.log("show grid", this.showGrid); }, consoleLog(text) { console.log(text) }, addBook: addBook, }, }); app.mount("#app"); 
没有评论:
发表评论