VueJS计算过滤器功能不起作用

Question

所以我正在尝试实现这里解释的功能Vuejs Search filter 但是计算中的函数似乎不起作用，甚至没有记录任何内容，这是我的代码：

...
<a-layout-header style="background: #fff; padding: 0">
    <a-input-search 
      placeholder="Search everything" 
      style="width: 200px; marginLeft: 20px" 
      v-model="searchData"
    />
    <a-button type="primary" style="marginLeft: 20px">
      + New
    </a-button>
</a-layout-header>
...
data() {
  return {
    data: json,
    collapsed: false,
    item_key: 1,
    searchData: ''
  };
},
computed: {
  searchResult() {
    if (this.searchData) {
      return this.data.filter((item) => {
        return this.searchData.toLowerCase().split(' ').every(v => 
                  item.title.toLowerCase().includes(v));
        })
    } else {
      return this.data;
    }
  }
},

编辑：过滤它的数据作为道具传递给子组件，我有一个 ant-design 表来获取它：

<a-table
  v-if="this.item.toString() === '1'"
  :columns="columns"
  :row-key="record => record.guid"
  :data-source="normalData"
  :pagination="pagination"
  :row-selection="rowSelection"
>
</a-table>

Answer 1

这就是你应该如何实现搜索过滤器：

...
<div>
    <input
      placeholder="Search everything" 
      v-model="searchData"
    >
    <div v-for="(item,index) in filteredList" :key="index">
      {{ item.title }}
    </div>
</div>
...
data() {
  return {
    data: [
  {
    id: 1,
    title: 'First item',
  },
  {
    id: 2,
    title: 'Second item',
  },
  {
    id: 3,
    title: 'Third item',
  },
],
    searchData: ''
  };
},
computed: {
  filteredList() {
    const filter = this.searchData.trim().toUpperCase();
    return filter ? this.data.filter(item =>
    {
      return item.title.toUpperCase().indexOf(filter) !== -1;
    }) : this.data;
  }
},