I have been working on a book tracking application that allows users to keep track of the books they have read or plan to read. The app is built using Vue.js on the front end and Express.js on the server side. It consists of three lists or categories for organizing books. One of the key functionalities I am trying to implement is the ability to change the category of a book (e.g. from 'currently reading' to 'finished') without having to reload the entire page. I have created a 'my books' component that includes a 'book list' component where I pass the 'listType' as a prop to render all three lists. Within the 'book list' component, I use a v-for loop to render all books and utilize a 'book' component for each book object. The 'book' component contains buttons for changing the category of the book. Although I am able to update the listType and database entry on the server side, I am facing difficulty in moving a book from one list to another without refreshing the entire page.
//mybooks component
<template>
<BookList listType="current" />
<BookList listType="wantToRead" />
<BookList listType="finished" />
</template>
//booklist component
<template>
<div v-for="bookElement in bookList" :key="bookElement.id">
<Book :book="bookElement" />
</div>
</template>
<script>
export default {
data() {
return {
bookList: []
};
},
components: {
Book
},
props: ["listType"],
watch: {
"$route.query.searchDB": {
//once a query string search value changes, get list of books from server
immediate: true,
async handler(value) {
const list = (await BooksService.index(value)).data;
//filter books by categories
this.bookList = list.filter(element => {
return element.listType === this.listType;
});
}
}
}
</script>
// book component
//template to render author, title etc
//and button for example
<button @click="changeTo('current', book.id)">Change to current</button>
<script>
import BooksService from "@/services/BooksService";
export default {
data() {
return {
isCurrent: false,
isLater: false,
isFinished: false
};
},
props: ["book"],
mounted() {
if (this.book.listType === "current") {
this.isCurrent = true;
} else if (this.book.listType === "finished") {
this.isFinished = true;
} else this.isLater = true;
},
methods: {
async changeTo(list) {
this.book.listType = list;
try {
await BooksService.put(this.book);
} catch (err) {
this.error = err;
}
}
}
};
</script>