Apabila butang diklik, lakukan penapisan VueJS pada data JSON yang dikembalikan

Question

Saya ingin menapis data json yang saya dapat dengan mengklik butang supaya hanya data yang sepadan dengan butang yang diklik (dalam nama buku kes saya) ditunjukkan dan data lain yang tidak dipadankan sehingga butang lain (buku) disembunyikan Klik pada nama lain yang sepadan.

Saya telah mengisi data sebagai senarai pada komponen seperti ini:

<li v-for"(book, i) in books" :key="i">
   {{book.name}}
</li>

Ia dipaparkan dengan betul seperti berikut:

1. Ahli alkimia
2. Harry Potter
3. Tunggu...

Kini, saya mempunyai butang (berkod keras) dan saya memerlukannya untuk menapis keputusan dan hanya menunjukkan butang yang diklik.

<button>The Alchemist</button>
<button>Harry Potter</button>

Ini adalah data json saya:

[{
 "name": "The Alchemist",
 "author": "Paulo Coelho",
 "year":  "1988",            
 },
{
 "name": "Harry Potter",
 "author": "J. K. Rowling",
 "year":  "1997",            
 }]

Sebarang idea untuk menyelesaikan masalah ini amatlah dihargai

Answer 1

Tunjuk cara kerja:

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

sssccc

  {{ book.name }}
  

    {{ book.name }}