Vue.jsでは、入力フォームとcomputedプロパティを組み合わせることで、リアルタイムで絞り込みができる検索フィルター機能を簡単に実装できます。本記事では、シンプルなリスト検索の例を通じて、v-modelとcomputedの連携方法を紹介します。
検索フィルター機能とは？
検索フィルターとは、キーワードや条件に応じて表示するリストの内容を動的に制御する機能です。Vue.jsでは、ユーザーの入力値をリアクティブに取得し、その値を使ってcomputedでフィルタリングされたリストを生成できます。
基本の実装例
以下は、名前のリストを対象に検索ボックスで絞り込むシンプルな実装例です。Vue 3のComposition APIを使用しています。
<template>
<div class="search-container">
<input v-model="keyword" type="text" placeholder="名前で検索..." />
<ul v-if="filteredList.length">
<li v-for="(item, index) in filteredList" :key="index">
{{ item }}
</li>
</ul>
<p v-else>該当する項目がありません。</p>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const keyword = ref('');
const items = ref([
'山田太郎',
'田中花子',
'佐藤健',
'鈴木一郎',
'高橋愛'
]);
const filteredList = computed(() => {
const kw = keyword.value.trim().toLowerCase();
if (!kw) return items.value;
return items.value.filter((item) =>
item.toLowerCase().includes(kw)
);
});
</script>
<style scoped>
.search-container {
max-width: 400px;
margin: 2rem auto;
}
input {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
}
ul {
padding-left: 1rem;
}
li {
margin-bottom: 0.5rem;
}
</style>
コードの解説
このコードでは、keywordという変数に検索ワードをv-modelでバインドし、それに応じてfilteredList（computedプロパティ）が動的に変化します。大文字・小文字の違いを無視するため、toLowerCase()で正規化しています。
拡張のアイデア
- 複数条件でのフィルター（例：カテゴリーやステータス）
- 非同期で取得したリストに対するフィルター処理
- 検索結果が0件のときのUI改善（例：候補を提案）
まとめ
Vue.jsでは、v-modelで取得した入力値をcomputedで処理することで、シンプルかつ効率的な検索フィルター機能を実装できます。ユーザーがリアルタイムで条件を変更しても即座にリストが反映されるため、UXの向上にもつながります。実案件でもよく使われるパターンなので、しっかり習得しておきましょう。
