【Vue.js + Django】フォームを送信するとプルダウンメニューが初期化されてしまう

Question

前提

現在Vue.js と　Djangoを使用してwebアプリの開発を行っています。

質問内容

以下のような画面に関しての質問です。
プルダウンメニューでテストの科目を絞り込んでテストをできるようにしたいのですが、フォームの送信ボタン（正解 or 不正解）をクリックしてページがリロードされると、プルダウンメニューで選択していた科目名が初期化されてしまいます。

やりたいこととしては、フォームを送信してページがリロードされても、プルダウンメニューで選択した項目は記憶しておきたいです。
そのためにどのようなコードを書けばいいのかわからないため、ご教示いただきたいです。

よろしくお願いいたします。

Comments

[TKG000]

まだ解決できてはいないのですが、プルダウンメニューの値をクッキーに保存し、フォーム送信後にクッキーから取り出してそれをプルダウンの初期値とする方法を考えています。

その方法をご教授いただきたいです。
宜しくお願いいたします。

Answer 1

以下のようにプルダウンメニューに変更があった場合にその内容をCookieに登録して、そのページが読み込まれた際（mounted）にCookieから登録した値を取り出し、プルダウンメニューの初期値に設定することで解決できました。

<div id=show>
   <select @change="detectChange" v-model="selected">
</div>

new Vue({
    el: '#show',
    delimiters: ['[[', ']]'],
    data: {
      subjects: subjectList,
      selected: '',
 
    },
    
    /* ページ読み込み時に実行される部分 */
    mounted: function(){
      //Cookieを全て取得
      var cookies = document.cookie;

      //取得したCookieを分割する
      var cookiesArray = cookies.split(';');
      var cookie = -1;
      for(var c of cookiesArray){
        var cArray = c.split('=');
        if(cArray[0] == 'pulldown'){
          //console.log(cArray);
          cookie = cArray[1];
        }
      }
      //確認部分--指定したidの後にCookieの内容を表示する--
      /* let e = document.getElementById('###');
      e.insertAdjacentHTML('afterend', '<p>' + document.cookie + '</p>');
      e.insertAdjacentHTML('afterend', '<p>' + cookie + '</p>'); */

      /* プルダウンの初期値設定 */
      if(cookie === -1){
        //cookieに何も登録されていない時
        this.selected = '全て';
      }else{
        this.selected = cookie;
      }

      var tests = [];
      //フィルタを掛けてデータを抽出する
      for(let i=0;i<testList.length;i++){
        if(this.selected=== '全て'){
          tests.push(testList[i]);
        }else if(this.selected === testList[i].subject){
          tests.push(testList[i]);
        }
      }
      this.test = tests[Math.floor(Math.random()*tests.length)];
    },
    methods: {
      /* テスト画面で解答を表示させる処理 */
      changeShow: function() {
        this.isActive = !this.isActive;
      },
      /* プルダウンメニューと同期させる処理 */
      detectChange: function(e) {
        /* 初期化 */
        var tests = [];
        //プルダウンの値を確認する
        //console.log(e.target.value);

        //cookieにプルダウンの値を登録する
        document.cookie = 'pulldown=' + e.target.value;

        //フィルタを掛けてデータを抽出する
        for(let i=0;i<testList.length;i++){
          if(e.target.value=== '全て'){
            tests.push(testList[i]);
          }else if(e.target.value === testList[i].subject){
            tests.push(testList[i]);
          }
        }
        this.test = tests[Math.floor(Math.random()*tests.length)];
      },
    },
  })