时间戳

首页 > 解决方案 > Vuex 创建搜索过滤器

vue.js - Vuex 创建搜索过滤器

问题描述

我是新手VueJs，Vuex我想创建一个简单的搜索过滤器。我的应用看起来像这样。

项目.vue：

<template>
  <div>
    <ItemToolbar></ItemToolbar>
    <ItemList :allItems="allItems"></ItemList>
  </div>
</template>

computed: {
  ...mapGetters(["allItems"])
}

所以我尝试在getter中创建一个名为searchByTitle.

const getters = {
 allItems: state => state.items,
 searchByTitle: state => searchValue => {
    const search = searchValue.trim().toLowerCase();
    return state.items.filter(
      item => item.title.toLowerCase().indexOf(search) > -1
    );
   }
};

我的问题的值searchValue将来自ItemToolbar组件，我不知道searchByTitle应该在哪里使用它来调用ItemToolbar组件或在Items组件中。

标签： vue.jsvuex

解决方案

我会从ItemToolbar.vueto发出事件Items.vue，然后将决定它必须显示哪些项目：如果标题存在 - 已过滤，如果不存在 - 所有项目。

<template>
<div>
   <ItemToolbar @filter="title = $event"></ItemToolbar>
   <ItemList :all-items="filteredItems"></ItemList>
</div>
</template>

...
data() {
  return {
    title: '',
  }
},
computed: {
  ...mapGetters(['allItems', 'searchByTitle']),
  filteredItems() {
    return this.title ? this.searchByTitle(title) : allItems
  },
},
...

并title从ItemToolbar.vue：

this.$emit('filter', VALUE_OF_THE_TITLE')

推荐阅读