Vue - 如何使用 Vuex 使用 mapState 在数组的第一个对象中列出数组

Question

我想在 Vuex 中使用 mapState 列出播放器中第一个对象的名称数组。在当前代码中，播放器中的对象是根据其标题列出的，但我只想根据该页面上第一个对象中的名称来过滤它们。在第二页上，我想根据我将添加到第二个对象的名称列出它们。我希望我能够解释我的问题。我怎样才能在过滤器中做到这一点？或者如果有更好的方法来做到这一点呢？

Players.vue

<template>
  <div class="Players">
    <CostumText class="Players-title" tag="h1">Kulüpler</CostumText>
    <div class="Players-search">
      <input type="text" v-model="search" placeholder="Kulüp ara.." />
      <label>Futbolcu ara:</label>
    </div>
    <div class="Players-inner">
      <router-link
        :to="players.pathName"
        class="Players-inner-wrapper"
        v-for="players in filteredList"
        v-bind:key="players.id"
      >
        <div class="Players-inner-cards">
          <Clubs class="Players-inner-cards-svg" v-bind:name="players.id" />
          <CostumText tag="strong" lang="tr" class="Players-inner-cards-text">
            {{ players.title }}
          </CostumText>
        </div>
      </router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CostumText from '@/components/CostumText'
import Clubs from '@/components/Clubs.vue'

export default {
  name: 'Players',
  components: {
    CostumText,
    Clubs
  },
  data() {
    return {
      search: ''
    }
  },
  computed: {
    ...mapState(['players']),
    filteredList() {
      return this.players.filter((player) =>
        player.title.toLowerCase().includes(this.search.toLowerCase())
      )
    }
  },
  modules: {}
}
</script>

存储/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    players: [
      {
        id: 1,
        names: ['kerem', 'sirin', 'ali', 'ayse', 'ahmet'],
        title: 'Ali',
        pathName: 'ali'
      },
      {
        id: 2,
        title: 'Ayse',
        pathName: 'ayse'
      },
      {
        id: 3,
        title: 'Ahmet',
        pathName: 'ahmet'
      }
    ]
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
})

Answer 1

你可以修改filteredList为

  computed: {
    ...mapState(['players']),
    filteredList() {
      const filteredPlayers = this.players.filter(player => {
        let flag = false;
        if(player.names) {
         player.names.forEach(name => {
          if(name.toLowerCase().includes(this.search.toLowerCase()) flag = true;
         });
        }
       return flag;
    });
    return filteredPlayers;
  },

这是显示姓名的方式

<div class="Players-inner-cards">
          <Clubs class="Players-inner-cards-svg" v-bind:name="players.id" />
          <CostumText tag="strong" lang="tr" class="Players-inner-cards-text">
            {{ players.names.valueOf() }}
          </CostumText>
        </div>