VueJS - 过滤器在单击按钮时返回 json 数据

Question

我想通过单击按钮过滤获取的 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",            
 }]

任何解决它的想法将不胜感激

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button v-for="(book, i) in books" :key="i" @click="filterData($event)">{{ book.name }}</button>
  <li v-for="(book, i) in filteredBooks" :key="i">
    {{ book.name }}
  </li>
</div>

VueJS - 过滤器在单击按钮时返回 json 数据

VueJS - Filter returned json data on button click

json

vue.js

vue-component

nuxt.js