Wenn Sie auf die Schaltfläche klicken, führen Sie eine VueJS-Filterung für die zurückgegebenen JSON-Daten durch

Question

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:

1. Alchemist
2. Harry Potter
3. Warte...

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

Answer 1

工作演示：

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);
    }
  }
});

  {{ book.name }}
  

    {{ book.name }}