Вы можете сохранить имеющийся у вас объект массива и создать его.
<template>
<ul class="nav flex-column">
<li v-for="(item, index) in list" :key="index" data-toggle="collapse" data-target="#users"
class="nav-item collapsed" :class="{'active': item.active}">
<div class="slide-out">
<div class="nav-link">
{{item.name}}
<i class="fas fa-fw fa-chevron-right float-right"></i></div>
<div id="users" class="collapse">
<ul class="nav flex-column">
<li v-for="(child, i) in item.children" :key="i" class="nav-item">
<a href="https://motorsport-manager.test/users" class="nav-link" :class="{'active': child.active}">
{{child.name}}
</a></li>
</ul>
</div>
</div>
<div class="slide-in float-right"><a href="https://motorsport-manager.test/users" class="nav-link"><i
class="fa-fw fas fa-users"></i></a></div>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: [
{
name: 'Users',
active: false,
children: [
{name: 'Manage', active: true},
{name: 'Create user', active: false},
]
},
{
name: 'Teams',
active: false,
children: [
{name: 'Manage', active: false},
{name: 'Create tram', active: false},
]
}
]
}
},
mounted() {
this.handleActive()
},
methods: {
handleActive() {
this.list.forEach(v => {
v.children.forEach(child => {
if (child.active) {
v.active = true
}
})
})
}
}
}
</script>