FrontEnd/Vue3

Vue3 To do list 만들기 (8) 검색기능 추가하기

2022. 6. 24. 20:46
반응형

먼저 검색창을 만들기 위해

부모 컴포넌트 맨 위에 input을 추가해준다

    <input
      class="form-control"
      type="text"
      v-model="search"
      placeholder="검색"
    />

v-model로 만든 변수명과 검색기능을 작동시킬 함수를 선언한다

let search = ref("");
let filterTodolist = computed(() => {
  if (search.value) {
    return todolist.value.filter((tmp) => {
      return tmp.sbj.includes(search.value);
    });
  } else {
    return todolist.value;
  }
});

sarch는 ref" "로

 

searchTodolist는 computed함수를 사용하였는데... ref값을 즉각적으로 변경하여 다시 출력할때..사용?한다..?

캐시를 두번사용하지 않는다는 특징이 있다 정도..?(computed 어려워 안써도 돌아갈꺼같은데..)

if(search.value)를 통하여 검색창에 값이 있을경우,

todolist(객체)안에filter를 통하여 tmp에 각 todo객체를 하나씩 순회하고
tmp.sbj = todolist안에 들어있는 각각의 todo들의 sbj가 검색창의 값을 포함하는지 return한다.

 

Filter 함수 예제 및 설명 (더보기)

더보기
const newArr = arr.filter(callbackFunction(element,index,array),thisArg);

로 구성되어있다.

element : 돌고있는 현재 값

index : 해당 값의 인덱스번호

array : 해당 값이 포함되어있는 배열


ex)
arr = ['1','2','3']
arr.filter((element,index,array)=>{
console.log(element)
})

arr = ['1','2','3']
arr.filter((element,index,array)=>{
console.log(index)
})
arr = ['1','2','3']
arr.filter((element,index,array)=>{
console.log(array)
})
1일때 해당값의 배열 출력, 2일때 ... 3일때

 

 

 

 

 

 

 


검색전

 

검색후

 

반응형
저작자표시 비영리 (새창열림)

'FrontEnd > Vue3' 카테고리의 다른 글

Vue3 To do list 만들기 (10) Pagination , WatchEffect  (0) 2022.06.28
Vue3 To do list 만들기 (9) DB연결 및 추가, 삭제 async await 을 곁들인  (0) 2022.06.24
Vue3 To do list 만들기 (7) props 주의사항  (0) 2022.06.24
Vue3 To do list 만들기 (6) props 부모->자식 데이터 전송  (0) 2022.06.23
Vue3 To do list 만들기 (5) 데이터 emit (자식 컴포넌트 ->부모 컴포넌트)  (0) 2022.06.21
'FrontEnd/Vue3' 카테고리의 다른 글
  • Vue3 To do list 만들기 (10) Pagination , WatchEffect
  • Vue3 To do list 만들기 (9) DB연결 및 추가, 삭제 async await 을 곁들인
  • Vue3 To do list 만들기 (7) props 주의사항
  • Vue3 To do list 만들기 (6) props 부모->자식 데이터 전송
빡상이
빡상이
게임 및 개발 관련 일지 작성하는 블로그
빡상이
끄적끄적
빡상이
반응형
  • 분류 전체보기
    • FrontEnd
      • Vue3
      • Nuxt
    • BackEnd
      • 로스트아크 Work
    • 백준(알고리즘)
    • Unreal Engine
    • 아크라시아 세카이
    • C++
    • 웹 개발 꿀팁
    • C#
    • Linux
      • 명령어
    • DB
      • SQL
      • Tibero
전체
오늘
어제

최근 댓글

최근 글

hELLO · Designed By 정상우.
빡상이
Vue3 To do list 만들기 (8) 검색기능 추가하기
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.