时间戳

首页 > 解决方案 > 过滤搜索栏中的项目 Vue Composition API

javascript - 过滤搜索栏中的项目 Vue Composition API

问题描述

我有一个使用 quasar 和组合 API 的 vue 应用程序。当应用程序启动时，它最初会从数据库中收集一次数据，并返回一个类别列表，其中包含每个类别中的人员。我想要做的是添加对搜索的支持，如上图所示。我的问题是我在哪里放置在每个类别中过滤人员的代码？它是作为计算属性进入视图组件还是我应该在“getters”中执行此逻辑？任何伪代码将不胜感激。

搜索输入被写回“状态”，因此我可以在应用程序的其他部分访问该值。

在此处输入图像描述

这是我的主要文件。

吸气剂.ts

import { StateInterface } from '../index';
import { AppState } from 'src/models/types';

const getters: GetterTree<AppState, StateInterface> = {
  categories: state => state.categories,
  isBusy: state => state.isBusy,
  settings: state => state.settings,
  filters: (state) => state.filters,
};

export default getters;

index.vue文件的重要位

<template>
  <q-page>
    <!-- displaying sections and people-->
      <q-list>
        <q-expansion-item
          v-for="cat in categories"
          :label="cat.name"
          :key="cat.name"
        >
          <q-card>
            <q-card-section>
                <PersonCard
                  v-for="(item, index) in cat.people"
                  :key="index"
                  :item="item"
                />
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-list>
  </q-page>
</template>

export default defineComponent({
  name: 'PageIndex',
  components: {},
  setup(props, { root }) {
    const categories = computed<Category[]>(() => root.$store.getters['app/categories']);
    return {
      categories,
    };
  },
});
</script>

更新 - 回应回答建议......

所以你建议我做这样的事情

吸气剂.ts

import { GetterTree } from 'vuex';

import { StateInterface } from '../index';
import { AppState } from 'src/models/types';

const getters: GetterTree<AppState, StateInterface> = {
  categories: state => state.categories,
  isBusy: state => state.isBusy,
  settings: state => state.settings,
  filters: (state) => state.filters,
  categoriesFiltered: state => ({
    const categories: Category[] = [];
    // for-loop people per category collecting those that match search string     
    return categories;
  }) 
};

export default getters;

标签： javascriptvue.jsvue-composition-api

解决方案

将其放入存储的 getter 中，因为 getter 用于计算数据，只需在视图组件的 created 钩子中调用该 getter

推荐阅读