配列から条件に一致するものを表示(vue.jsでfilter()を使う)

こんにちは、松井です。

現在、タイムマネジメントツールを自作しており、月ごとに消化タスクを切り替える作業を行いました。

具体的な実装内容は、配列から条件に合うものだけを表示するといった事を実装をしています。その内容について纏めていますので、ぜひ参考にしてください。

ゴール：先月、次月の切り替えに合わせた消化タスクDOMの表示

例えば、今月が（2019/12）の場合。「>」クリックすると来月（2020/1）に、「＜」をクリックすると先月（20/19/11）に、月を切り替えた際の月に応じた消化タスクを表示する事がゴールです。

月送りの表示

<div class="date flex_center">
  <a href="#" class="arrow" @click="shift('back')"><i class="fas fa-chevron-left"></i></a>
  <div v-cloak class="dateBox">
      <span class="year">{{ currentYear }}</span>
      <span class="month">{{ currentMonth }}</span>
  </div>
  <a href="#" class="arrow" @click="shift('next')"><i class="fas fa-chevron-right"></i></a>
</div>

@click="shift('back')"と@click="shift('next')" が月の表示を切り替える部分です。クリックすると先月と次月に表示を変更します。

消化タスク一覧を表示(配列を表示)

vue側のhtml側の表示内容は下記。

<!-- src/resource/Maincontainer.vue -->
 
<DayItem v-for="item in changeDayItem" :key="item.id"></DayItem>  

私の場合、vue.パネルをいつくか分けているので、このような表記ですが、ここで伝えたいのはv-for部分です。

変更前

上記のコードは、変更後ですが、変更前はリストの中を参照するという表示。

<DayItem v-for="item in list" :key="item.id"></DayItem>  

変更後

一覧表示テーブルの v-for ディレクティブで使用している list の部分を changeDayItem に置き換えましょう。

<DayItem v-for="item in changeDayItem" :key="item.id"></DayItem>  

data定義

vue側のスクリプトの表示内容を見ていきます。

<!-- src/resource/Maincontainer.vue -->
    
data(){
       return{
           currentYear: 0,
           currentMonth: 0,
           name: 'マツイ タカフミ', 
           selectedItem: null,
           selectedTask: null,
           message: null,
           list:[
               {id: 1, year:2019, month:11, dateTime: '1(mon)', startTime:'11:00', stopTime: '18:20', breakTime:'1.0', workTime: '8.0', complateTask: '・LPのテストサーバーへのアップ'},,
               {id: 2, year:2019, month:12, dateTime: '1(Tue)', startTime:'12:00', stopTime: '18:00', breakTime:'0.5', workTime: '8.5', complateTask: '・LPのテストサーバーへのアップ'},
               {id: 3, year:2019, month:1, dateTime: '1(wed)', startTime:'12:00', stopTime: '18:00', breakTime:'0.5', workTime: '8.5', complateTask: '・LPのテストサーバーへのアップ'},
           ]       
        }
   },

currentYear/currentMonthで年/月の表示、list内は、表示したい勤怠部分のデータです。通常は、カレンダーのプラグイン等を使うと早いのですが、カレンダーではなく、月に合わせた、消化タスクを表示したいので、自走しているという具合です。

現在時間の取得

必要な現在の年/月を取得します。

   created(){
       const date  = new Date();
       [this.currentYear, this.currentMonth] = [date.getFullYear(), date.getMonth() + 1,];  
   },

配列から条件に一致するものをfilter()で抽出

具体的な、実装は算出プロパティ(computed)を利用しています。

<!-- src/resource/Maincontainer.vue -->

    computed: {
       changeDayItem(){
           const data = this.list;
           const result = data.filter(x => x.year === this.currentYear &&  x.month === this.currentMonth);
           return result;
       }
   },

抽出には、filter()を使うと便利です。filter()条件に合う1箇所ではなく、条件と合致する全てを配列で返してくれます。 見つからなかったら空の配列を返します。

data.filter(x => x.year === this.currentYear &&  x.month === this.currentMonth);

カスタムフィルタについては、ドキュメントも参考になります。
https://jp.vuejs.org/v2/guide/list.html

月送りの実装

今回は、主にfilter()を使った抽出について纏めましたが、合わせて月送りのロジックも実装する必要があったので、メモとして残していますので、参考にされてください。

shift(val){
　if('back'===val){
     this.currentMonth = (this.currentMonth===1)?12:this.currentMonth-1;
     this.currentYear = (this.currentMonth===12)?this.currentYear-1:this.currentYear;
  }else{
　　this.currentMonth = (this.currentMonth===12)?1:this.currentMonth+1;
　　this.currentYear = (this.currentMonth===1)?this.currentYear+1:this.currentYear;
  }
},
       

ではでは。