點選按鈕時，對傳回的JSON資料進行VueJS過濾

Question

我想透過點擊按鈕來過濾獲取的json 數據，以便僅顯示與單擊的按鈕匹配的數據（在我的案例書名稱中），並隱藏直到另一個按鈕才匹配的其他數據（書籍）按一下符合的其他名稱。

我已將資料填入元件上的列表，如下所示：

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

它們正確呈現如下：

1. 煉金術士
2. 哈利波特
3. 等等...

現在，我有按鈕（硬編碼），我需要它們來過濾結果並顯示僅單擊的那些按鈕。

<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",            
 }]

任何解決該問題的想法將不勝感激

#

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

sssccc

  {{ book.name }}
  

    {{ book.name }}