Vue.jsでリアルタイム検索機能をつくる

はじめに

Vue.jsでリアルタイム検索機能をつくる方法について

設定方法

<template>
  <div class="container-fluid">
    <div
      id="search-form"
      class="form-row p-3"
    >
      <div class="form-group col-lg-6 offset-lg-3">
        <label for="search">絞り込み</label>
        <input
          id="search"
          v-model="keyword"  // 入力された値を取得する
          type="text"
          placeholder="タスク名を入力してください"
          class="form-control"
        >
      </div>
    </div>
............
............
............
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import TaskDetailModal from './components/TaskDetailModal'
import TaskCreateModal from './components/TaskCreateModal'
import TaskEditModal from './components/TaskEditModal'
import TaskList from './components/TaskList'

export default {
  name: "TaskIndex",
  components: {
    TaskDetailModal,
    TaskCreateModal,
    TaskEditModal,
    TaskList
  },
  data() {
    return {
      taskDetail: {},
      isVisibleTaskDetailModal: false,
      isVisibleTaskCreateModal: false,
      isVisibleTaskEditModal: false,
      taskEdit: {},
      keyword: '',   //  初期値を設定
    }
  },
  computed: {
    ...mapGetters('tasks', [ 'tasks' ]),
    ...mapGetters("users", ["authUser"]),

    todoTasks() {
      return this.filteredTasks.filter(task => {
        return task.status == "todo"
      })
    },

    doingTasks() {
      return this.filteredTasks.filter(task => {
        return task.status == "doing"
      })
    },

    doneTasks() {
      return this.filteredTasks.filter(task => {
        return task.status == "done"
      })
    },

    // 検索欄に文字が入力されるたびにこの算出プロパティが実行される
    filteredTasks() {
      return this.tasks.filter(task => {
        return task.title.indexOf(this.keyword) != -1  // indexOfは該当しない場合は-1を返す
      })
    }
  },
...........
...........
...........
}
</script>