I want to filter the json data I get by clicking a button so that only the data that matches the button clicked (in my case book name) is shown and other data that doesn't match until another button is hidden (books ) click on the other name that matches.
I have populated the data as a list on the component like this:
<li v-for"(book, i) in books" :key="i">
{{book.name}}
</li>
They are correctly rendered as follows:
Now, I have buttons (hardcoded) and I need them to filter the results and show only those buttons clicked.
<button>The Alchemist</button> <button>Harry Potter</button>
This is my json data:
[{
"name": "The Alchemist",
"author": "Paulo Coelho",
"year": "1988",
},
{
"name": "Harry Potter",
"author": "J. K. Rowling",
"year": "1997",
}]
Any ideas to solve this problem would be greatly appreciated
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Working Demonstration:
new Vue({ el: '#app', data: { books: [{ "name": "The Alchemist", "author": "Paulo Coelho", "year": "1988", }, { "name": "Harry Potter", "author": "J. K. Rowling", "year": "1997", }], filteredBooks: [] }, mounted() { this.filteredBooks = this.books; }, methods: { filterData(e) { this.filteredBooks = this.books.filter((obj) => obj.name === e.target.textContent); } } });