かとのぼのマイコード・マイライフ

ウェブサービス開発者のブログ

Buefyのタブで画面を変えてもタブの位置を記録させておきたい時【Buefy】【Tabs】【Vuex】

f:id:katonobo:20190430130031p:plain

Buefyを使えばv-modelとの組み合わせによって、簡単にタブが実装できます。

buefy.org

タブを変更した時にアクティブな場所を表示させる機能の実装は面倒なので大変助かります。

ただ、この方法だとrouter-linkで画面を遷移されたりするとタブが最初に設定した場所に戻ってしまいます。

例えば、戻るボタンを押した時にまたタブが最初の場所に戻っていたらユーザーにはストレスです。

解決策:Vuexを使う

この場合は、Vuexを使うのが一番いいでしょう。

BuefyのTabsは、親要素に「b-tabs」、子要素に「b-tab-item」を持つ形となっており、子要素の数だけバイディングしています。

ですから、b-tabsに「v-model」をつけて、Vuexのstoreに最初は「0」を入れておいて、他のタブが選択された時にデータを変更すればいいです。

v-modelとVuexのデータの関連付けは少しややこしいのでこちらを参考にしてください。

vuex.vuejs.org

サンプルコード

サンプルコードを載せておきます。

 

サンプル

 

 

関連記事:

www.katonobo.com

www.katonobo.com