vuejs、v-forループ内の動的クラスをバインドする方法

Question

Vuejsでは、私はnavで「アクティブ」クラスを設定したいと思います。 NAVは、V-ため、このようなループで構築されています。

<li v-for="item in arrNav" v-bind:class="{'active' : item.id }"> 
    <a v-link="{ path: item.id }">{{ item.title}}</a> 
</li> 

は、ここにデータです：

arrNav: [{ 
    'title': 'Home', 
    'id': 'home' 
    }, 
    { 
    'title': 'About', 
    'id': 'about' 
    }, 
    { 
    'title': 'Contact', 
    'id': 'contact' 
    }] 

これは、すべての李上で「アクティブ」クラスを設定しています。 item.idが文字列であるためtrueを返すからです。 item.idをその変数名に評価する方法はありますか？

Answer 1

vue-routerはデフォルトでこの機能を提供しているため、より高度な機能があります。あなたは、ナビゲーション要素の親項目にクラスを与えたい場合は、v-link-activeを使用することができます：li項目にv-link-activeクラスを提供します

<li v-for="item in arrNav" v-link-active> 
    <a v-link="{ path: item.id }">{{ item.title}}</a> 
</li> 

。このページはvue-routerのドキュメントをご覧ください。