如何在vue中通过另一个数组过滤数组

Question

我有两个对象数组，其中一个称为子模块，其中有一个子数组，我需要通过访问的对象数组来过滤这些子数组

​

new Vue({
  data: {
    submodules: [
      {
          type: "something1",
          children: [
              {
                  name: "new_sth1",
                  value: "new_sth1"
              },
              {
                  name: "new_sth2",
                  value: "new_sth2"
              }
          ]
      },
      {
          type: "something2",
          children: [
              {
                  name: "new_sth3",
                  value: "new_sth3"
              },
          ]
      },
      {
          type: "something3",
          children: [
              {
                  name: "new_sth4",
                  value: "new_sth4"
              },
              {
                  name: "new_sth5",
                  value: "new_sth5"
              },
              {
                  name: "new_sth6",
                  value: "new_sth6"
              },
          ]
      },
    ],
    accessed: [
      {value: 'new_sth1'},
      {value: 'new_sth2'},
      {value: 'new_sth3'},
      {value: 'new_sth4'},
    ]
  }
})

<div class="row">
    <div class="col-6 mt-3" v-for="item in submodules">
        <div class="card" style="min-height: 260px">
            <div class="card-header" style="background: #757575;color: white">
                {{item.type}}
            </div>
            <div class="card-body">
                <ul class="nav nav-pills nav-stacked mb-0 pb-0">
                    <li style="width: 100%;cursor: pointer" class="navbar my-0 py-0" v-for="child in                                              item.children">
                        <a style="color: black" :href="'/'+child.value">
                            <span class="text-right navbar-text">{{child.name}}</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

​

我需要根据访问的数组值过滤子模块数组。我试了很多方法，但都不能解决这个问题。如果任何人有任何想法，请与我分享。

Answer 1

可以使用computed属性根据accessed筛选submodules数组。

computed properties in vue js

codesandbox：代码未设置样式，因为我尚未安装引导程序。

computed: {
    getFilteredResult() {
      return this.submodules.reduce((acc, curr) => {
        const children = curr.children.filter(({ value }) => {
          return this.accessed.find((x) => x.value === value);
        });
        acc.push({ ...curr, children });
        return acc;
      }, []);
    },
  },