如何从GraphQL数据集中在VUE中创建动态过滤

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 data数组中的对象之前删除 - books 数组应包含一堆普通对象。如果将节点放置：在每个对象之前 - 节点 !!!(

2. 简化过滤Books 计算 - 无需存储所有变量。此函数(过滤Books(不会更改输入，因此您可以在此处使用 this 。filter()函数不会更改其过滤的数组，而是返回a 新数组，仅包含ITEMEREE函数" SAW"为true

的值

3. 您检查!searchString，这种情况绝对不会 - searchString 始终将是 true ，您用searchString: ''初始化它(一个空值 - 但是一个空值 - 但是值(，所以我将其更改为检查 effteredBooks 计算中的空值。

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