Lorsque vous cliquez sur le bouton, effectuez un filtrage VueJS sur les données JSON renvoyées
P粉125450549
P粉125450549 2024-03-27 12:45:15
0
1
430

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

P粉125450549
P粉125450549

répondre à tous(1)
P粉619896145

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 }}
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal