Lorsque vous cliquez sur le bouton, effectuez un filtrage VueJS sur les données JSON renvoyées

Question

Je souhaite filtrer les données json que j'obtiens en cliquant sur un bouton afin que seules les données correspondant au bouton cliqué (dans mon cas, le nom du livre) soient affichées et les autres données qui ne correspondent pas jusqu'à ce qu'un autre bouton (livre) soit masqué. Cliquez sur le autre nom qui correspond.

J'ai renseigné les données sous forme de liste sur le composant comme ceci :

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

Ils sont rendus correctement comme suit :

1. Alchimiste
2. Harry Potter
3. Attendez...

Maintenant, j'ai des boutons (codés en dur) et j'en ai besoin pour filtrer les résultats et afficher uniquement les boutons cliqués.

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

Voici mes données json :

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

Toute idée pour résoudre ce problème serait grandement appréciée

Answer 1

Démo de travail :

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