如何从状态 vuex 映射对象中的数组？答案

【问题标题】：how can map an array in a object from state vuex?如何从状态 vuex 映射对象中的数组？
【发布时间】：2021-02-12 16:19:11
【问题描述】：

我在 items 数组中有一些对象，在那个对象中，有一个数组，我已经过滤了对象的值，但是位于它上面的数组没有过滤我知道它是自然的，但我不知道如何映射或过滤数组，任何人都可以帮助我？

这是我的 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;
    },
  },

【问题讨论】：

问google如何过滤数组不是更简单吗？
@bülent-akgül 我没有找到答案，我想你不明白我的意思，我的 favs 数组中有一个数组，我要过滤它，但我不知道如何

标签： vue.js vuex

【解决方案1】：

我找到了解决方案，而不是这行代码：

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

添加以下行代码：

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

【讨论】：

【解决方案2】：

代替

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

使用

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

在方法中

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

【讨论】：