Vueでアクティブなメニューオプションを設定する方法

Question

私は2列レイアウトです。左の列には積み重ねられたメニューがあり、ユーザーがオプションを選択すると、コンテンツが右に表示されます。選択したメニューリンクにactiveクラスを設定する最良の方法は何ですか？

私は以下の解決策を思いつきましたが、それは冗長なようです。各メニュー項目には、data.activeTabを条件とするクラス割り当てがあります。クリックイベントハンドラは、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

代わりに手動アンカータグの使用router-linkとあなたrouter construction optionsでlinkActiveClassを設定します。

私はあなたのルートオブジェクトを見ることができませんので、これはあなたが上に持っているものに基づいて最良の推測です。あなたのto属性を設定する最良の方法を決定するために、私が上にリンクしたルータのリンク文書を参照してください。あなたは、ルータを初期化しどこ

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

その後、

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