So stellen Sie die aktive Menüoption mit Vue ein

Question

Ich habe ein zweispaltiges Layout. Die linke Spalte hat ein gestapeltes Menü, und wenn der Benutzer eine Option auswählt, wird der Inhalt rechts angezeigt. Was ist der beste Weg, um die active Klasse auf dem ausgewählten Menü Link zu setzen?

Ich habe unten eine Lösung gefunden, aber es scheint irgendwie ausführlich. Jeder Menüeintrag hat eine Klassenzuordnung, die von data.activeTab abhängig ist. Ein Click-Ereignishandler aktualisiert den Wert data.activeTab.

<template> 
    <div> 
     <div class="row"> 
      <div class="col-md-3"> 
       <ul class="nav nav-pills nav-stacked"> 
        <li role="presentation" :class="{active : activeTab == 'option1'}"> 
         <a :href="'/#/sales/' + uuid + '/option1'" @click="updateMenu">Option 1</a> 
        </li> 
        <li role="presentation" :class="{active : activeTab == 'option2'}"> 
         <a :href="'/#/sales/' + uuid + '/option2'" @click="updateMenu">Option 2</a> 
        </li> 
       </ul> 
      </div> 
      <div class="col-md-9"> 
       <router-view></router-view> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     data : function() { 
      return { 
       activeTab : 'option1' 
      } 
     }, 
     props : [ 
      'uuid' 
     ], 
     methods : { 
      updateMenu : function (event) { 
       var str = event.target.toString(); 
       this.activeTab = str.substr(str.lastIndexOf('/') + 1); 
      } 
     } 
    } 
</script> 

Answer 1

Verwenden router-link statt Ihrer manuellen Anker-Tags und die linkActiveClass in Ihrem router construction options gesetzt.

Ich kann Ihr Routenobjekt nicht sehen, daher ist dies eine gute Schätzung, basierend auf dem, was Sie oben haben. Schlagen Sie in der oben verlinkten Router-Link-Dokumentation nach, um herauszufinden, wie Sie Ihre to-Attribute am besten einrichten können.

<router-link tag="li" :to="{ path: 'sales', params: { uuid : uuid, option: "option1" }}"> 
    <a>Option 1</a> 
</router-link> 
<router-link tag="li" :to="{ path: 'sales', params: { uuid : uuid, option: "option2" }}> 
    <a>Option 2</a> 
</router-link> 

Dann, egal wo Sie Ihren Router initialisiert,

new VueRouter({ 
    routes, 
    linkActiveClass: "active" 
});