상태 vuex에서 개체의 어레이를 매핑하려면 어떻게 해야 합니까?

상태 vuex에서 개체의 어레이를 매핑하려면 어떻게 해야 합니까?

아이템 어레이에 오브젝트가 몇 개 있고, 그 오브젝트에는 어레이가 있습니다.오브젝트 값을 필터링했지만 그 어레이에 있는 어레이는 필터링을 하지 않았습니다만, 어레이를 어떻게 매핑 또는 필터링 할 수 있는지 모르겠습니다.누군가 도와 주실 수 있을까요?

vuex 스토어 코드:

const store = new Vuex.Store({
    state: {
        count: 0,
        items: [
            { id: 1, name: "Jack", age: 19, favs: ["Football", "Game"] },
            { id: 2, name: "Tom", age: 20, favs: ["Basketball", "Swiming"] },
        ],
    },
    getters: {
        filterItems(state) {
            return state.items.filter((item) => item);
        },
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        },
    },
    actions: {},
    modules: {},
});

여기 html 코드:

<table>
  <thead>
    <tr>
      <th>Name:</th>
      <th>Age:</th>
      <th>Favs:</th>
    </tr>
  </thead>
    <tbody v-for="(item, index) in filterItemsShow" :key="index">
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.favs }}</td>
      </tr>
    </tbody>
</table>

및 vuejs 코드:

export default {
  name: "App",
  computed: {
    filterItemsShow() {
      return this.$store.getters.filterItems;
    },
  },

다음 라인 코드 대신 솔루션을 찾았습니다.

 <td>{{ item.favs }}</td>

아래 라인 코드 추가:

<td v-for="(i,index) in item.favs" :key="index">{{ i }}</td>

대신

<td>{{ item.favs }}</td>

사용하다

<td>{{ filterFavs(item.favs) }}</td>

메서드

filterFavs(favs) {
  let filteredFavs = favs.filter(fav => // filter with your criterias);
  return filteredFavs.join(", ")
}

언급URL : https://stackoverflow.com/questions/64604381/how-can-map-an-array-in-a-object-from-state-vuex