I'm currently troubleshooting why my sorting function is not functioning as expected.
My goal is for it to operate similarly to this example: https://codepen.io/levit/pen/abmXgBR
The data I am working with is retrieved from an API:
<BookCard v-for='book in filteredBooks' :key='book.id' :book='book' />
While the search filter is functional, the sorting feature isn't. Here is a snippet of my data along with computed properties/methods:
data() {
return {
books: [],
order: 1, // Ascending
search: '',
};
},
computed: {
filteredBooks() {
return this.filterBySearch((this.sortByRating(this.books)));
},
},
methods: {
filterBySearch(books) {
return books.filter((book) => book.volumeInfo.title
.toLowerCase().match(this.search.toLowerCase()));
},
sortByRating(books) {
return books
.sort((r1, r2) => (r2.volumeInfo.averageRating - r1.volumeInfo.averageRating)
* this.order);
},
sort() {
this.order *= -1;
},
},
To change the order, I have implemented a button:
<button v-bind:class="order === 1 ? 'descending' : 'ascending'" @click="sort">
Reader Rating
</button>
If you have any suggestions or insights on what could be causing the issue, please share them as I am relatively new to Vue.
Thank you!