Ich möchte die JSON-Daten filtern, die ich durch Klicken auf eine Schaltfläche erhalte, sodass nur die Daten angezeigt werden, die mit der angeklickten Schaltfläche (in meinem Fall Buchname) übereinstimmen, und andere Daten, die nicht übereinstimmen, bis eine andere Schaltfläche (Buch) ausgeblendet wird anderer passender Name.
Ich habe die Daten als Liste auf der Komponente wie folgt ausgefüllt:
<li v-for"(book, i) in books" :key="i">
{{book.name}}
</li>
Sie werden wie folgt korrekt wiedergegeben:
Jetzt habe ich Schaltflächen (fest codiert) und ich benötige sie, um die Ergebnisse zu filtern und nur die angeklickten Schaltflächen anzuzeigen.
<button>The Alchemist</button> <button>Harry Potter</button>
Das sind meine JSON-Daten:
[{
"name": "The Alchemist",
"author": "Paulo Coelho",
"year": "1988",
},
{
"name": "Harry Potter",
"author": "J. K. Rowling",
"year": "1997",
}]
Alle Ideen zur Lösung dieses Problems wären sehr willkommen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
工作演示：
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); } } });