Q&A
###前提・実現したい事
アクティブのタブに.activeクラスをつけたいです。
試した事...v-bind:class isActiveをli要素につけてみたのですが、
アクティブ以外のli要素にも.activeクラスがついてしまいます。
ご存知の方いらっしゃいましたらご教示頂けると幸いです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 </style> 8</head> 9<body> 10 <div id="app" v-cloak> 11 <ul> 12 <li v-for="(tab, index) in tabNav" @click="changeTab(index)">{{ tab }}</li> 13 </ul> 14 <div v-if="contents == 0"> 15 コンテンツ1 16 </div> 17 <div v-if="contents == 1"> 18 コンテンツ2 19 </div> 20 <div v-if="contents == 2"> 21 コンテンツ3 22 </div> 23 </div> 24 <script src="https://unpkg.com/vue/dist/vue.js"></script> 25 <script> 26 new Vue({ 27 el: '#app', 28 data: { 29 scrollY: 0, 30 tabNav: [ 31 'JavaScript', 32 'PHP', 33 'HTML' 34 ], 35 contents: 0 36 }, 37 methods: { 38 changeTab: function (index) { 39 this.contents = index; 40 alert("click"); 41 } 42 } 43 }) 44 45 </script> 46</body> 47</html>
回答1件
0
ベストアンサー
試した事...v-bind:class isActiveをli要素につけてみたのですが、
ついてないじゃん！
この書き方が誤ってるから動かないんだよ！！
だから、試した書き方自体を載せないと駄目だよ。
というわけで既に見たと思うけど、公式サイトのドキュメントをもう一度見ていこう。
HTML
1<div v-bind:class="{ active: isActive }"></div>
上記の構文は
activeクラスが存在するかどうかを、データプロパティのisActiveが true と評価される値かによって決まることを意味します。
オブジェクトに複数の項目を持たせることで、複数のクラスを切り替えることができます。加えて、
v-bind:classディレクティブはプレーンなclass属性と共存できます。
なるほど、つまり質問文のli要素の箇所をこういう風に書き換えれば良いわけだね。
HTML
1<li v-for="(tab, index) in tabNav" @click="changeTab(index)" v-bind:class="{ active: ???? }>{{ tab }}</li>
サンプルコードは{ active: isActive }だけど、
このリスト要素はv-forによって動的に生成されているから、
vueのdataの中にisActive: trueなどと宣言したら全てのタブがアクティブになってしまう。
そこで、true / falseになるような論理値になる式を作ってあてがう。
HTML
1 <div v-if="contents == 0"> 2 コンテンツ1 3 </div>
良いものが転がってるじゃん。
v-forで宣言したindexがchangeTab(index)に入って、data.contentsの値を書き換えているわけだから、
index === data.contents等として比較すれば良い。
つまり答えはこう。
HTML
1<li v-for="(tab, index) in tabNav" @click="changeTab(index)" v-bind:class="{ active: index === contents }>{{ tab }}</li>
投稿2017/11/01 06:48
総合スコア21158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/01 14:20