How to filter an array by another array in vue

Question

I have two arrays of object which one of them is called submodules which has a children array in it and I need to filter these childrens arrays by accessed array of objects

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>

I need to filter submodules array by accessed array values. I tried many ways but I couldn't solve the problem. If anyone has any idea please share it with me.

Answer 1

You can use computed property to filter the submodules array according to accessed.

computed properties in vue js

codesandbox: Code is not styled as I've not installed the bootstrap.

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;
      }, []);
    },
  },