Vue get the current element and read children

Question

I'm new to Vue and I have a bootstrap navigation with a collapse which contains more navigation items. So basically it's just a menu which can slide in and out.

What I want: I want to add a class to the parent item (the active class) when one or more of the children has the active class.

But I have no idea how to do this with vue. Can anyone help me achieve this?

My HTML looks like this:

<ul class="nav flex-column">
    <li data-toggle="collapse" data-target="#users" class="nav-item collapsed">
        <div class="slide-out">
            <div class="nav-link">
                Users
                <i class="fas fa-fw fa-chevron-right float-right"></i></div>
            <div id="users" class="collapse">
                <ul class="nav flex-column">
                    <li class="nav-item"><a href="https://motorsport-manager.test/users" class="nav-link  active ">
        Manage
    </a></li>
                    <li class="nav-item"><a href="https://motorsport-manager.test/user/create" class="nav-link ">
        Create user
    </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>
    <li data-toggle="collapse" data-target="#teams" class="nav-item collapsed">
        <div class="slide-out">
            <div class="nav-link">
                Teams
                <i class="fas fa-fw fa-chevron-right float-right"></i></div>
            <div id="teams" class="collapse">
                <ul class="nav flex-column">
                    <li class="nav-item"><a href="https://motorsport-manager.test/teams" class="nav-link ">
        Manage
    </a></li>
                    <li class="nav-item"><a href="https://motorsport-manager.test/team/create" class="nav-link ">
        Create team
    </a></li>
                </ul>
            </div>
        </div>
        <div class="slide-in float-right"><a href="https://motorsport-manager.test/teams" class="nav-link"><i class="fa-fw fas fa-chalkboard"></i></a></div>
    </li>
    <li data-toggle="collapse" data-target="#team-members" class="nav-item collapsed">
        <div class="slide-out">
            <div class="nav-link">
                Team members
                <i class="fas fa-fw fa-chevron-right float-right"></i></div>
            <div id="team-members" class="collapse">
                <ul class="nav flex-column">
                    <li class="nav-item"><a href="https://motorsport-manager.test/team-members" class="nav-link ">
        Manage
    </a></li>
                    <li class="nav-item"><a href="https://motorsport-manager.test/team-member/create" class="nav-link ">
        Create team member
    </a></li>
                </ul>
            </div>
        </div>
        <div class="slide-in float-right"><a href="https://motorsport-manager.test/team-members" class="nav-link"><i class="fa-fw fas fa-users-cog"></i></a></div>
    </li>
    <li data-toggle="collapse" data-target="#race-categories" class="nav-item collapsed">
        <div class="slide-out">
            <div class="nav-link">
                Race categories
                <i class="fas fa-fw fa-chevron-right float-right"></i></div>
            <div id="race-categories" class="collapse">
                <ul class="nav flex-column">
                    <li class="nav-item"><a href="https://motorsport-manager.test/race-categories" class="nav-link ">
        Manage
    </a></li>
                    <li class="nav-item"><a href="https://motorsport-manager.test/race-category/create" class="nav-link ">
        Create race category
    </a></li>
                </ul>
            </div>
        </div>
        <div class="slide-in float-right"><a href="https://motorsport-manager.test/race-categories" class="nav-link"><i class="fa-fw fas fa-boxes"></i></a></div>
    </li>
    <li data-toggle="collapse" data-target="#race-series" class="nav-item collapsed">
        <div class="slide-out">
            <div class="nav-link">
                Race series
                <i class="fas fa-fw fa-chevron-right float-right"></i></div>
            <div id="race-series" class="collapse">
                <ul class="nav flex-column">
                    <li class="nav-item"><a href="https://motorsport-manager.test/race-series" class="nav-link ">
        Manage
    </a></li>
                    <li class="nav-item"><a href="https://motorsport-manager.test/race-series/create" class="nav-link ">
        Create race series
    </a></li>
                </ul>
            </div>
        </div>
        <div class="slide-in float-right"><a href="https://motorsport-manager.test/race-series" class="nav-link"><i class="fa-fw fas fa-warehouse"></i></a></div>
    </li>
</ul>

score 0 · Answer 1 · answered May 21 '19 at 08:49

You could keep an object of array you have and foreach it.

<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>

Thanks. When I do this I do get an error "Uncaught SyntaxError: Unexpected token export" which is caused by the "export default". Why is this? — , May 23 '19 at 05:43
Duplicate of [this issue](https://stackoverflow.com/questions/52715529/vue-js-2-5-1-uncaught-syntaxerror-unexpected-token-export). You can look at it first and then adopt my answer~ @TheatreOfSouls — sugars, May 23 '19 at 06:52

Vue get the current element and read children

1 Answers1