데이터 실시간 서치
Axios로 데이터 가져오기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| data(){
return {
poketmon:[],
filterInput:'',
}
},
mounted(){
axios.get('@/assets/data/poketmon.json')
.then(res => {
console.log(res)
this.poketmon = res.data.poketmon
})
.catch(e => {
this.error.push(e)
})
}
mounted 훅에서 데이터를 가져와서 뿌려줬다
created 훅으로도 적어봤는데 똑같이 잘 동작한다
|
Computed filter
1
2
3
4
5
6
7
8
9
| computed:{
filteredList(){
const value = this.filterInput
return this.poketmon.filter(function(mon){
return mon.name.includes(value) || mon.type.includes(value)
})
}
}
|
- 인풋으로 들어가는 데이터가 계산되어 나올수 있게 computed에 메소드를 적는다
- poketmon 배열을 filter메소드로 걸러서 반환한다 무엇을? filter의 콜백 함수 부분에서 조건에 맞는 요소를
- includes() 메소드는 문자열이 특정 문자열을 포함하는지 확인하는 메소드
axios로 api 요청할때 쿼리값으로 넣는 것만 해봐서
받아온 데이터를 필터링 하는건 처음 해봐서 좀 헤맸다..