javascript - 如何在 Vue 中从 graphql 数据集创建动态过滤？

Question

当数据集来自 graphql-query 时，如何使用 vue 的计算属性创建动态过滤器？

我已经看过几篇文章，它们都使用 array.filter() 方法，但我无法让它在我的数据集上工作(下面的虚拟数据):

books: [{
                node: {
                title:  'Elon Musk',
                by:'Ashlee Vance',
                },
                node: {
                title:  'Steve Jobs',
                by:'George Llian',
                },
                node: {
                title:  'Face of Facebook',
                by:  'Sandip Paul',
                },
                node: {
                title:  'Tim Cook',
                by:'Andy Atkins',
                url:'http://www.voidcanvas.com/'
                },
                node: {
                title:  'Abdul Kalam',
                by:'Arun Tiwari',
                },
                node: {
                title:  'Story of Elon Musk',
                by:'BP John',
                },
                node: {
                title:  'Story of Bill Gates',
                by:'Russel Crook',
                },
                node: {
                title:  'Becoming Steve Jobs',
                by:'Andrew Russel',
                }
            }]

方法:

computed: {
        filteredBooks:  function () {
            var  books_array  =  this.books,
            searchString  =  this.searchString;
            if(!searchString) {
                return  books_array;
            }
            searchString  =  searchString.trim().toLowerCase();
            books_array  =  books_array.filter(function(item) {
                if(item.node.title.toLowerCase().indexOf(searchString) !==  -1) {
                return  item;
                }
            });
            return  books_array;
    }

HTML:

<div id="app">
  <input type="text" v-model="searchString" placeholder="search" />

    <ul style="list-style: none;">
      <li v-for="book in filteredBooks">
        <p>{{book.title}} -by- {{book.by}}</p>
      </li>
    </ul>
</div>

这是我自 2000 年初以来的第一个编码项目，因此，如果这是解决此问题的错误论坛，请随时为我指出正确的方向。

我设置了一个jsfiddle玩这个案例。

Answer 1

这是经过一些修改的代码:

var app = new Vue({
  el: '#app',
  data: {
    searchString: '',
    books: [{
        title: 'Elon Musk',
        by: 'Ashlee Vance'
      },
      {
        title: 'Steve Jobs',
        by: 'George Llian'
      },
      {
        title: 'Face of Facebook',
        by: 'Sandip Paul'
      },
      {
        title: 'Tim Cook',
        by: 'Andy Atkins',
        url: 'http://www.voidcanvas.com/'
      },
      {
        title: 'Abdul Kalam',
        by: 'Arun Tiwari'
      },
      {
        title: 'Story of Elon Musk',
        by: 'BP John'
      },
      {
        title: 'Story of Bill Gates',
        by: 'Russel Crook'
      },
      {
        title: 'Becoming Steve Jobs',
        by: 'Andrew Russel'
      }
    ]
  },
  computed: {
    filteredBooks: function() {
      return this.books.filter(e => this.searchString === '' ? false : e.title.toLowerCase().indexOf(this.searchString.toLowerCase()) !== -1 ? true : false);
    }
  }
});

body {
  background-color: #dbd8d8;
  padding: 20px;
}

input {
  width: 300px;
  height: 30px;
  padding: 0.2rem;
}

.design {}

p {
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  margin: .5em 0;
  border: 3px solid white;
  background: #FC756F;
  color: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="searchString" placeholder="search" />

  <ul style="list-style: none;">
    <li v-for="book in filteredBooks">
      <p>{{book.title}} -by- {{book.by}}</p>
    </li>
  </ul>
</div>

1. 删除 books 数据数组中对象之前的节点: - books 数组应包含一堆普通对象。如果您将 node: 放在每个对象之前，那么您就“说”每个 node 是对象的键值对的键(因此键名将相同) - 节点!!!)

2. 简化filteredBooks计算 - 无需存储所有变量。此函数 (filteredBooks) 不会更改输入，因此您可以在此处使用this。 filter() 函数不会更改它过滤的数组，而是返回一个新数组，其中仅包含 iteratee 函数“看到”为 true 的值

3. 您检查 !searchString ，但事实并非如此 - 当您使用以下命令初始化时，searchString 始终为 true searchString: '' (一个空值 - 但也是一个值)，因此我更改了它，检查 filteredBooks 计算中的空值。

4. 我修改了代码，以便将小写字母与小写字母进行比较。在您的代码中，如果有人输入大写的搜索字符串，则不会有匹配项。