v-list-tileでリンクってどうするんだ？？
地味にハマりそうになったので、備忘録として。
vue-cliでvuetifyをベースにしてプロジェクトを作った場合に、App.vueのv-list-tileなるものがtemplateに含まれている。
どう見てもサイドメニュー的な役割を果たすものだと思うのだけど、サンプルではリンクとしての役割を果たしていないのでリンクとして機能させたかった。
結論としてはv-list-tileには「:to」をつけてやればよかった。
作成されたプロジェクトのdata内にあるitemsにlinkを加えている。
<v-list-tile
value="true"
v-for="(item, i) in items"
:key="i"
:to="item.link"
>
...中略
<script>
export default {
data () {
return {
clipped: false,
drawer: true,
fixed: false,
items: [{
icon: 'bubble_chart',
title: 'メニュー',
link: '/'
},
{
icon: 'dialpad',
title: '計算機',
link: '/calculator'
}],
miniVariant: false,
right: true,
title: '中小企業診断士アプリ作るよー'
}
},
name: 'App'
}
</script>
Javaを普段はメインでやっているけどフロント側についても少し知識を付けたいってモチベーションで始めたけど、こんな所で躓くとは。。。
リモート案件で多いのがjs・Ruby・PHP・アプリ開発とかなのでそっちの方も受けられるように触っておこうという軽い気持ちで挑んだ結果、心が折られそうになった。
ただ、firebaseとvue.jsで認証機能作ったけど簡単に実装できてびっくりしたのでもうちょっと根気よく触っていこうと思う。
認証機能実装の参考にしたQiita:
https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241
P.S. にしてもAwesome Screenshot使いやすいな