使用 Vuejs 在循环生成的菜单中打开一个 UL @click

Question

仍在处理我的菜单并努力解决一个新问题。我希望用户在单击 UL 时能够访问 LI 子菜单。问题是我看不到如何只针对链接的 LI 元素。当我点击任何 UL 时，它会打开所有 LI。

一种简单的方法是在 HTML 中创建不同的 UL，但我想用循环菜单生成这个简短的内容。

如何使用@click 事件瞄准精确的 UL，只打开它的子 LI？

new Vue({
  el: "#app",
  data: {
    categories: {
        Atoms: ['Buttons', 'Icons'],
        Molecules: [],
        Organisms: [],
        Templates: [],
        Utilities: ['Grid']
      },
      openSubCategories: false,
  },
})

 .doc_nav {
  display: flex;
    justify-content: around;
 }

  .doc_nav__ul {
    margin: 0 30px;
  }

  .doc_nav__li {
    text-align: center;
  }
  
  .doc_nav__li:first-child {
    margin-top: 20px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <header class="doc_header">
    <nav class="doc_nav">
      <ul @click="openSubCategories = !openSubCategories" class="doc_nav__ul" v-for="[ category, subCategories ] in Object.entries(categories)" :key="category"> {{category}}
        <template v-if="openSubCategories == true" >
          <li class="doc_nav__li" v-for="subCategory in subCategories" :key="subCategory">
           {{ subCategory }}
          <!-- <router-link :to="subCategory"> {{ subCategory }} </router-link> -->
          </li>
        </template>
      </ul>
    </nav>
  </header>
</div>

Answer 1

使用CSS隐藏李。我觉得你可以应付。

new Vue({
  el: "#app",
  data: {
    categories: {
      Atoms: ['Buttons', 'Icons'],
      Molecules: [],
      Organisms: [],
      Templates: [],
      Utilities: ['Grid']
    },
    currentActiveCategory: null,
  },
  method: {
    changeClickUl(category) {
      if (category == this.currentActiveCategory) this.currentActiveCategory = null
      else this.currentActiveCategory = category
    }
  }
})

.doc_nav {
  display: flex;
  justify-content: around;
}

.doc_nav__ul {
  margin: 0 30px;
}

.doc_nav__ul:not(visible) {
  display: none;
}

.doc_nav__li {
  text-align: center;
}

.doc_nav__li:first-child {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <header class="doc_header">
    <nav class="doc_nav">
      <ul @click="changeClickUl(category)" :class="{visible:currentActiveCategory==category}" class="doc_nav__ul" v-for="[ category, subCategories ] in Object.entries(categories)" :key="category"> {{category}}
        <li class="doc_nav__li" v-for="subCategory in subCategories" :key="subCategory">
          {{ subCategory }}
          <!-- <router-link :to="subCategory"> {{ subCategory }} </router-link> -->
        </li>
      </ul>
    </nav>
  </header>
</div>

Answer 2

这是 gao.xiangyang

更正后的有效答案

它正在使用 css。没有css的解决方案：v-if="currentActiveCategory==category"

new Vue({
  el: "#app",
  data: {
    categories: {
      Atoms: ['Buttons', 'Icons'],
      Molecules: [],
      Organisms: [],
      Templates: [],
      Utilities: ['Grid']
    },
    currentActiveCategory: null,
  },
  methods: {
    displaySubCategories(category) {
      if (category == this.currentActiveCategory) {
      this.currentActiveCategory = null
    } 
    else this.currentActiveCategory = category
    }
  }
})

.doc_nav {
  display: flex;
  justify-content: around;
}

.doc_nav__ul {
  margin: 0 30px;
}

.doc_nav__li:not(visible) {
display: none;
}

.doc_nav__li--visible {
display: block !important;
}

.doc_nav__li {
  text-align: center;
}

.doc_nav__li:first-child {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <header class="doc_header">
    <nav class="doc_nav">
      <ul @click="displaySubCategories(category)" class="doc_nav__ul" v-for="[ category, subCategories ] in Object.entries(categories)" :key="category"> {{category}}
        <li :class="{'doc_nav__li--visible' : currentActiveCategory==category}" class="doc_nav__li" v-for="subCategory in subCategories" :key="subCategory">
          {{ subCategory }}
          <!-- <router-link :to="subCategory"> {{ subCategory }} </router-link> -->
        </li>
      </ul>
    </nav>
  </header>
</div>

使用 Vuejs 在循环生成的菜单中打开一个 UL @click

Open one UL @click in a loop generated menu with Vuejs

loops

menu

list

drop-down-menu

vue.js