Webアプリ開発（Django+Vue.js+Docker）#9

こちらの記事の続きになります。

今回は、プルダウンメニューでテストの絞り込みを行う機能を実装し、登録したテストを確認する画面を完成させます！

バックエンド

実は下のページでバックエンドの処理は行っていました。

そのため、フロントエンドにいきなり行きます。

フロントエンド

まずは、プルダウンメニューを作ります。
これも、テストを作る画面と同様です。

以下に追加します。

<!-- Vue.jsを反映させる範囲 -->
<div id="popup">
  <!-- フィルタリング -->
  <div>
    <div>テスト一覧</div>
    <select @change="detectChange" v-model="selected">
      <option value="全て">全て</option>
      <option v-for="subject, index in subjects" :value="subject.subject">[[ subject.subject_name ]]</option>
    </select>
  </div>

  <!-- テスト -->
  <div class="testcard">
    <div v-for="test, index in tests">
      <div class="card box">

データベースに登録されている科目をバックエンドから受け取っているので、<option>タグをv-forとforループさせてプルダウンメニューの項目を作成していることが分かります。

また、<select>タグが今までと少し異なっています。
この処理は次に行いますが、Vueを使ってプルダウンの状態を監視し、変更されたときに動的に処理を施すために必要です。

また、v-modelはプルダウンメニューの初期値を動的に変更するために必要です。

でも、文章で説明するよりもやった方が早いと思うので、実際に作ってみましょう。

一番下のVue関数を修正します。

new Vue({
    el: '#popup',
    delimiters: ['[[', ']]'],
    data: {
      TESTS: TESTS,
      subjects: subjectList,
      selected: '',
      tests: testList,
    },
    /* ページ読み込み時に実行される部分 */
    mounted: function(){
      this.selected = '全て'
      this.tests = [];

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

まずmountedはtest_historyページを読み込んだ最初の一回に実行される部分です。

まず、this.test[]と表示するテストの内容を初期化し、そこにselectedで指定している科目に合わせて表示するテストの内容を動的に変化させるという事です。

this.selectedは先ほど作成したプルダウンメニューに設定されており、この値がプルダウンメニューの初期値になります。

以上の動作は、ページが読み込まれた初めの一回しか実行されませんでした。次は、プルダウンメニューが変更されるたびに表示テストの内容を変更できるようにします。

そのためには、以下をVue関数に追加します。

methods: {
      /* プルダウンメニューと同期させる処理 */
      detectChange: function(e) {
        /* 初期化 */
        this.tests = [];

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

methodsは常に指定したidの<div>タグでくくられている中を監視し、何か変更があった場合は実行される部分です。

今回は、プルダウンメニューの変更を常に監視したいので、プルダウンメニューの<select>タグ内に記述したdetectChangeという関数をここに書きます。

この関数内でプルダウンメニューで現在選択されている項目は、以下を記述することで取得可能です。

e.target.value

また、ここでも、先ほどのmountedの部分と同様にして、プルダウンメニューの選択項目に合わせてthis.tests[]の中身を変更することで、表示されるテストを変更することができます。

以上になります！
それでは確認してみてください。
プルダウンメニューを変更するたびに表示項目が動的に変わっていることが分かります。

＋α

ここで、プルダウンメニューで一つの科目を選択した状態でテストの修正や削除を行ってみてください。

おそらく、プルダウンメニューの内容が初期化されてしまっていることが分かります。

テスト数が少ない場合は大丈夫なのですが、多くなってくると、いちいち選択しなおすという事が非常に面倒になってきます。
なので、ページがリロードされてもプルダウンメニューの選択項目が記憶されているようにしましょう。

今回はブラウザのCookieを使用します。

Cookieの確認方法

ページ上で右クリック→検証→Application→Cookies→http://localhost
で確認可能

それでは戻ります。

まずは、今のプルダウンの選択項目をCookieに保存することを行いましょう。
つまり、プルダウンメニューを変更するたびに、Cokkieに登録する処理を行えば良いです。

その処理は以下の通りです。

detectChange: function(e) {
        /* 初期化 */
        this.tests = [];

        //cookieにプルダウンの値を登録する（有効期限180秒）
        document.cookie = 'pulldown=' + e.target.value + ';max-age=180';

Cookie登録時には書式があるので、これの通りに書いてください。また、追加で登録時から何秒間記憶するのかも設定登録できるので、今回は180秒に設定しました。

これで登録は終わりです。
確認方法は、先ほどのCookiesの部分を開きながらプルダウンメニューを変更してみてください。値が変わっていることが分かると思います。
※変更した後、別のWebSQLとかをクリックしてまた戻ってくるという動作は必要。

それでは次は、ページを読み込む際にこのCookiesに登録されている科目をプルダウンメニューの初期値に設定することを行います。

ページ読み込み時なので、記述する場所はmounted内です。

/* ページ読み込み時に実行される部分 */
    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];
        }
      }

      /* プルダウンの初期値設定 */
      if(cookie === -1){
        this.selected = '全て';
      }else{
        this.selected = cookie;
      }

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

まずCookieを全て取得して、そこからpulldownのデータだけ抽出してきます。

そして、もしpulldownの内容がCookiesに登録されていることを確認したら、その値をプルダウンメニューの初期値にします。
しかし、もし何も登録されていなかった場合は、'全て'をプルダウンメニューの初期値にします。

そこからは、先ほどやったものと同じで、その値に合わせて表示テストの内容を変更します。

今回は以上になります！