使用 vuex 搜索列表栏

Question

我正在开发一个 vueJs 应用程序，其中有一个上传者列表和一个搜索栏，但是在添加 vuex 之后，该列表不再呈现。按照问题的说明，我写道：

 <template>
  <div class="consumer container-fluid">
      <input
        class="form-control container mb-3"
        placeholder="Enter an uploader"
        v-model="searchedUploader"
      />
      <ul
        class="list-group"
        v-for="uploader in filtered"
        v-bind:key="uploader.username"
      >
        <li class="list-group-item list-group-item-action">
          <p>
            {{ uploader.nome }}
          </p>
        </li>
      </ul>
    </div>
</template>

<script>

import { mapGetters, mapActions } from "vuex";

export default {
  name: "Home",
  data() {
    return {
      searchedUploader: "",
    };
  },
  computed: {
    ...mapGetters(["consumerUploaders","filteredUploaders"]),
    filtered() {
      return this.filteredUploaders(this.searchedUploader);
    },
  },
  methods: mapActions(["fetchUploaders"]),

  created() {
    this.fetchUploaders();
  },
};
</script>

我的 consumer.js 是：

const state = {
  uploaders: [],
};

const getters = {
  consumerUploaders: (state) => state.uploaders,
  filteredUploaders: (state) => (target) => {state.uploaders.filter(uploader => 
    uploader.nome.toLowerCase().startsWith(target.toLowerCase()))}
};

但是没有用。如果我将 v-for="uploader in filtered" 替换为 v-for="uploader in consumerUploaders"，则会显示列表，但搜索栏当然不会过滤它。任何的想法？谢谢！

Answer 1

您忘记 return 在 getter 方法中过滤上传者：

const getters = {
  consumerUploaders: (state) => state.uploaders,
  filteredUploaders: (state) => (target) => {
    return state.uploaders.filter((uploader) =>
      uploader.nome.toLowerCase().startsWith(target.toLowerCase())
    );
  }
};

使用 vuex 搜索列表栏

Search bar for list using vuex

filter

searchbar

vue.js

vuex