Currently, I have two arrays of objects: one is named submodules and it contains a children array within it. My goal is to filter these children arrays based on another array called accessed.
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.filter(submodule => accessed.some(accessedItem => accessedItem.value === submodule.children[0].value))">
<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 am struggling to filter the submodules array using the values from the accessed array. If you have any suggestions or ideas, please feel free to share them with me.