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>