Откройте один UL @click в сгенерированном меню oop с помощью Vuejs - PullRequest
Новая
       30

Откройте один UL @click в сгенерированном меню oop с помощью Vuejs

0 голосов
/ 13 февраля 2020

Все еще работаю над моим меню и борюсь с новой проблемой. Я хочу, чтобы пользователь мог переходить в подменю LI при нажатии на UL. Проблема в том, что я не вижу, как нацеливаться только на связанные элементы LI. Когда я щелкаю по любому UL, он открывает все LI.

Самый простой способ - создать другой UL в HTML, но я бы хотел, чтобы этот шорт был сгенерирован с помощью меню oop.

Как я могу нацелиться на точный UL с событием @click, чтобы открыть только его дочерний 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>

Ответы [ 2 ]

1 голос
/ 13 февраля 2020

Используйте CSS, чтобы скрыть li. Я думаю, что вы можете справиться с этим. 

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>
0 голосов
/ 13 февраля 2020

Вот исправленный и рабочий ответ gao.xiangyang

Используется css. Решение без css: v-if = "currentActiveCategory == категория" 

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