Vue.js学習メモ(検索機能の実装)

Vue.jsを使って、リアルタイムで検索結果を表示する検索フォームを実装することを考えます。

検索フォームに打ち込んだ文字列をタイトルに含むタスクのみが画面上に表示されるようにします。

task/index.vue

<template>
<label for="search">絞り込み</label>
  <input
    id="search"
    v-model="searchTask"  // dataに定義したsearchTaskに入力した文字列を入れ込む
    type="text"
    placeholder="タスク名を入力してください"
    class="form-control"
  >
</template>

<script>
export default {
  data() {
    return {
      searchTask: '',
    }
  },
  computed: {
    todoTasks() {
      return this.filteredTasks.filter(task => {
        // 下に定義したfilteredTasksで絞り込んだtodoタスクのみ表示
        return task.status == "todo"
      })
    },
    filteredTasks() {
      return this.tasks.filter(task => {
        return task.title.indexOf(this.searchTask) != -1  
        // indexOf関数で-1にならない＝searchTaskに代入されている文字列を含む
      })
    }
  },
  .
  .
  .
</script>

土日と平日の学習モチベーションに大きな差が生じている現状をどうにかしたい今日この頃です。