我想透過點擊按鈕來過濾獲取的json 數據，以便僅顯示與單擊的按鈕匹配的數據（在我的案例書名稱中），並隱藏直到另一個按鈕才匹配的其他數據（書籍）按一下符合的其他名稱。
我已將資料填入元件上的列表，如下所示：
<li v-for"(book, i) in books" :key="i">
{{book.name}}
</li>
它們正確呈現如下：
現在，我有按鈕（硬編碼），我需要它們來過濾結果並顯示僅單擊的那些按鈕。
<button>The Alchemist</button> <button>Harry Potter</button>
這是我的 json 數據：
[{
"name": "The Alchemist",
"author": "Paulo Coelho",
"year": "1988",
},
{
"name": "Harry Potter",
"author": "J. K. Rowling",
"year": "1997",
}]
任何解決該問題的想法將不勝感激
#
工作演示：
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); } } });