Vue 获取当前元素并读取子元素

Question

我是 Vue 新手，我有一个带有折叠的引导导航，其中包含更多导航项。 所以基本上它只是一个可以滑入和滑出的菜单。

我想要什么：当一个或多个子项具有活动类时，我想向父项（活动类）添加一个类。

但我不知道如何使用 vue 来做到这一点。 谁能帮我实现这个目标？

我的 HTML 如下所示：

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

Answer 1

你可以保留一个你拥有的数组对象并foreach它。

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