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

먼저 검색창을 만들기 위해

부모 컴포넌트 맨 위에 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일때

 

 

 

 

 

 

 

---

검색전

 

검색후