Как получить значение из li по щелчку из меню для динамической маршрутизации c в vuejs? - PullRequest
Новая
       103

Как получить значение из li по щелчку из меню для динамической маршрутизации c в vuejs?

0 голосов
/ 13 июля 2020

** Пока что создал компонент для каждого li. Мне нужно, чтобы это был динамик c. На загрузку уходит много времени. Понятия не имею, как это сделать **

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
           ....        
          <div class="category">
            <li class="dropdown menu-large nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Categories </a>
              <ul class="dropdown-menu megamenu">
                  <div class="row">
                  <li class="col-md-3 dropdown-item">
            
                  <li class="col-md-3 dropdown-item">
                      <ul>
                          <li class="dropdown-header">Boys</li>
                          <li class="disabled"><li><router-link to="Pajama_kurta">Pajama kurta</router-link>
                          <li class="disabled"><li><router-link to="Track_pants">Track pants</router-link>
                          <li class="disabled"><li><router-link to="Inner_Wears">Inner Wears</router-link>
                          <li class="divider"></li>
                          <li class="dropdown-header">Home Essentials</li>
                          <li class="disabled"><li><router-link to="Kitchen_appliances">Kitchen appliances</router-link></li>
                          <li class="disabled"><li><router-link to="Doormats">Doormats</router-link></li>
                          <li class="disabled"><li><router-link to="Bedsheets">Bedsheets</router-link></li>
                      </ul>
                  </li>
                  <li class="col-md-3 dropdown-item">
                      <ul>
                          <li class="dropdown-header">Girls</li>
                          <li class="disabled"><li><router-link to="Frocks_party_wear">Frocks party wear</router-link></li>
                          <li class="disabled"><li><router-link to="Cotton_frocks">Cotton frocks</router-link></li>
                          <li class="disabled"><li><router-link to="Summer_collections">Summer collections</router-link></li>
                          <li class="disabled"><li><router-link to="Inner_wear">Inner wear</router-link></li>
                      </ul>
                  </li>
                  </div>
                  </ul>
          </li>
          </div>
          .......
</nav>

1 Ответ

0 голосов
/ 13 июля 2020
• 1000 : 
<div @click="handleClicks($event)">
    <li></li>
    <li></li>
    <li></li>
    ...
</div>

Теперь в методах добавьте функцию handleClicks(): 

methods: {
    handleClicks(click) {
      if (click.target.tagName == "LI") { //Check if clicked element is a <li>
        let value = click.target.value    //Get li's value
        router.push('name of view you want to navigate to') //Navigate to different page. Also note that the router must be imported to use it.
      }
    }
  }

Дайте мне знать, если у вас возникнут другие вопросы

...