Vue.jsでタブリストを作る
Vue.jsでタブリストを作ったので、中身とハマったポイントをまとめました。
完成品
タブをクリックすると表示内容が変わります。
実際に形になると、Vueで書いた所がhtmlとどう関係しているのかクリアになりました。
実際に表示される部分や動きはVueで書いて、htmlはそれらが画面に出せるように場を作るって感じでした。
おまけ〜見た目を作る〜
リストの「・」と余白を消す
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
リストを横に並べて間隔を整える
#container {
width: 450px;
}
ul li {
float: left;
line-height: 160%;
width: 150px;
height: 40px;
}
aタグの場所を整えて装飾
ul li a {
display: block;
text-align: center;
text-decoration: none;
background-color: #a9f85e;
color: #000;
border: solid 1px Black;
}
コンポーネント部分を装飾
#container div{
text-align: center;
background-color: #e2fdc9;
border: solid 1px Black;
}
色々とお好みで設定してみて下さい💪🏻
ハマったポイント
tabNamesの役割を誤解してた
computed: {
tabNames: function(){
return Object.keys(this.tabs);
},
currentTab: function(){
return this.current;
}
}
こういう流れでコードが書いてあるので、tabNamesがcurrentTabに使うためのタブ名を取得して来ると勘違いしてました。
誤：tabNamesでタブ名を取得しcurrentTabに渡す。htmlでcurrentTabが呼び出されてcurrentを表示
正：onclickでtabを取得し、currentに代入。htmlでcurrentTabが呼び出されてcurrentを表示
tabNamesは画面にタブ名として表示される部分を取得するものでした。
この勘違いのせいでonclickの違和感が凄かったです。
タブ名とコンポーネントの連携も謎に思っていました。
コンポーネントの表示に必要なのはdataで定義したtabsオブジェクトのプロパティ（今回はtab1、tab2、tab3）でした。
onclickがプロパティを受け取ってくれるので、currentTabがクリックに応じたコンポーネントを表示できます。
各タグにスタイルを適用する書き方を間違えてた
htmlの方ではidを使っているのに、cssで.を使って書いていました。
id使うならcssでは＃を使わないとダメでした。
a要素がliからはみ出て表示される（縦中央揃えにならない）
liの中にa要素が入らなくて苦労しました。
どうやらa要素がインライン属性なことが関係しているようです。
a要素にdisplay: block;を指定したら綺麗になりました。
コンポーネントごと横並べになる
liにfloatを指定したらコンポーネントの部分まで横並びになりました。
調べてみたら、そもそもfloatが使うと他の要素が回り込んで表示されるようになるものでした。
containerとliに大きさを指定することで、floatを使っていても折り返して表示されるようになりました。
この作り方だとタブが増えた時に対応できなくなりそうなので、
柔軟な画面を作りたかったらfloatではなくflexを使った方が良さそうです。
タブ名をクリックするほどコンポーネントが下にずれる
正しくcssが適用されていないことが原因でした。
#や>に注意して大きさやスタイルが適用されたらおかしな動きはしなくなりました。
画面に何も表示されない
「これからはじめるVue.js実践入門」を参考にしている人は注意が必要です。
私はこちらの参考書を参考にタブリストを作成していたのですが、
参考書内では
v-on:click.preprnd="onclick(tab)"
となっていますが、正しくは
v-on:click.prevent="onclick(tab)"
でした。
preprndではなくprevent！！！
ここが違うだけで画面に何も表示されなくなって沼りました。
この参考書の他の誤字等はこちらを参考にしてみて下さい。
Discussion