##■前提
Vue.jsで選んだセレクトボックスの値によってコンテンツを切り替えるという実装をしています。
Aを選択するとAの内容を表示、Bを選択したらBの内容を表示するといった具合です。
初期値は「値を選択してください」にしています。
上記はすでに実装済みなのですが、以下2つの問題が解決出来ずにいます。
##■現状
①リロードすると初期値「値を選択してください」に戻ってしまう
②コンテンツ(A,B)内にあるボタンを押下し次のページに遷移した後ブラウザバックすると、選択していたセレクトボックスの値はそのままですがコンテンツは非表示になってしまっている状態。
例）セレクトボックスでAを選択し、表示されたコンテンツ内のボタンを押して別ページへ。その後ブラウザバックするとセレクトボックスはAになっているがコンテンツは非表示。
しかも再度Aを選択してもコンテンツは表示されない。。(リロード後解決します)
##■実現したいこと
①リロードしても選択したセレクトボックスの値とコンテンツを表示させたい。
②ブラウザバックしても選択したセレクトボックスの値とコンテンツを表示させたい。
▼以下の参考ブログに書かれていることが正に実現したい事なのですが、セレクトボックスの場合どう書けばいいのか分からず困っている状態です。。、
参考ブログ
====================
JavascriptもVue.jsもほぼ初心者なのですが仕事で必要になったため調べながら実装しています。ですが基礎が殆ど無いため検索しても余計に分からなくなってしまい質問させていただきました。こういった方法がスマートだ、などのヒントでも構いませんのでアドバイス等いただけないでしょうか。どうぞよろしくお願いいたしますm(_ _)m
HTML
1<div id="test">
2 <!-- セレクトボックス -->
3 <select v-model="selectedItem">
4 <option
5 v-for="item in selectItems"
6 :value="item.id"
7 :key="item.id"
8 >
9 {{ item.label }}
10 </option>
11 </select>
12
13 <!-- Aの内容 -->
14 <div v-if="isA" id="a">
15 <h2>Aの内容です</h2>
16 <a href="https://www.google.com/?hl=ja">別ページへの遷移ボタン</a>
17 </div>
18 <!-- Bの内容 -->
19 <div v-if="isB" id="b">
20 <h2>Bの内容です</h2>
21 <a href="https://www.google.com/?hl=ja">別ページへの遷移ボタン</a>
22 </div>
23</div>
Vue.js
1const test = new Vue({
2 el: "#test",
3 data() {
4 return {
5 selectItems: [
6 { id: 1, label: "値を選択してください" },
7 { id: 2, label: "A" },
8 { id: 3, label: "B" },
9 ],
10 selectedItem: 1,
11 };
12 },
13 // 今何が選ばれているかを判定する算出プロパティ
14 computed: {
15 isA() {
16 return this.selectedItem === 2;
17 },
18 isB() {
19 return this.selectedItem === 3;
20 },
21 }
22 })
補足情報（バージョン）
2.6.14
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。