Vue.js의 양방향 데이터 바인딩을 활용한 실시간 검색 필터링 구현 방법
Vue.js는 데이터와 UI를 쉽게 동기화하는 JavaScript 프레임워크입니다. 이를 활용하여 실시간 검색 필터링 기능을 구현하는 방법을 알아보겠습니다.
필요한 기술 스택
- Vue.js: 프론트엔드 프레임워크로서 양방향 데이터 바인딩을 지원합니다.
- Vue 컴포넌트: UI를 구성하는 독립적인 단위입니다.
- 인스턴스 데이터: Vue.js 앱에서 사용되는 데이터입니다.
구현 방법
- Vue.js 프로젝트 생성: Vue CLI를 사용하여 Vue.js 프로젝트를 생성합니다.
- 데이터 소스 생성: 검색 필터링에 사용할 데이터 소스를 생성합니다. 예를 들어,
products라는 배열을 생성하고 각 항목은name과category속성을 가지도록 합니다. - Vue 컴포넌트 생성: 검색 필터링 기능을 가진 Vue 컴포넌트를 생성합니다. 이 컴포넌트는 검색어를 입력받는 입력 필드와 검색 결과를 표시하는 요소로 구성될 수 있습니다.
- 양방향 데이터 바인딩 설정: Vue 컴포넌트에서 입력 필드에 입력된 검색어를 인스턴스 데이터의 속성과 바인딩합니다. 이를 통해 검색어가 변경될 때마다 실시간으로 결과를 업데이트할 수 있습니다.
- 필터링 로직 구현: 인스턴스 데이터의 속성과 일치하는 항목만 필터링하여 표시합니다. 이를 위해 Vue 컴포넌트의
computed속성이나watch속성을 활용할 수 있습니다. - UI 업데이트: 필터링된 결과를 화면에 표시합니다.
<template>
<div>
<input v-model="searchQuery" type="text" placeholder="검색어를 입력하세요" />
<ul>
<li v-for="product in filteredProducts" :key="product.id">{{ product.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '', // 검색어를 담는 데이터
products: [
{ id: 1, name: '상품1', category: '의류' },
{ id: 2, name: '상품2', category: '전자제품' },
{ id: 3, name: '상품3', category: '의류' },
{ id: 4, name: '상품4', category: '도서' },
],
};
},
computed: {
filteredProducts() {
return this.products.filter(product => {
return product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
|| product.category.toLowerCase().includes(this.searchQuery.toLowerCase());
});
},
},
};
</script>
위 예시 코드에서는 검색 필터링을 위한 입력 필드와 결과를 표시하는 요소인 <ul>과 <li>를 사용했습니다. v-model 디렉티브를 사용하여 검색어를 searchQuery 속성과 양방향으로 바인딩하였고, filteredProducts computed 속성을 통해 필터링된 결과를 반환하였습니다.
이를 활용하여 Vue.js 앱에서 실시간 검색 필터링 기능을 구현할 수 있습니다.