검색 카테고리 여러 개 동시 선택

 

 

검색 조건을 여러개 동시에 선택을 할 때 배열에 선택된 속성들을 추가한 후 보내줘야 합니다.

 

만약 회원 상태라는 검색 조건을 여러개 검색하고 싶은 경우 아래 코드처럼 ref로 배열을 만들고 검색 조건들을 입력합니다. 그리고 vue3에서는 v-model로 각 요소들을 연결해주면 각 조건을 체크하면 설정한 v-model에 true, false가 입력됩니다.

 

const accountStatusList = ref([
  { model: isTest1Status, id: 'test1', label: '회원상태1' },
  { model: isTest2Status, id: 'test2', label: '회원상태2' },
  { model: isTest3Status, id: 'test3', label: '회원상태3' },
  { model: isTest4Status, id: 'test4', label: '회원상태4' }
])

<div
	v-for="(status, index) in accountStatusList"
	:key="index"
>
	<input
    	v-model="status.model"
    	type="checkbox"
    	:id="status.id"
    	name="accountStatus"
	/>
	<label :for="status.id">{{ status.label }}</label>
</div>

 

 

 

 

 

 

 

---

 

검색을 할 때는 Get 요청을 보내기 때문에 url 파라미터로 배열 값들을 보내줘야 하는데 axios에 직렬화를 따로 해주지 않으면 아래와 같은 형태로 전송이 되어서 오류가 납니다.

 

파라미터: { test: [1, 2, 3, 4, 5] }

 

https://example.com/api/data?test[]=1&test[]=2&test[]=3&test[]=4&test[]=5 

 

제가 원하는 주소는 

 

https://example.com/api/data?test=1&test=2&test=3&test=4&test=5 

 

이렇게 백엔드에서 받으면 GetMapping에서 @RequestParam 으로 리스트를 받을 수 있습니다. 아래는 arrayFormat 종류인데 원하는 옵션을 사용하면 됩니다. 저는 repeat를 사용했습니다.

 

qs.stringify(params, option)

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 'a=b,c'

 

 

 

 

 

 

그래서 아래 코드처럼 qs.stringify로 직렬화를 해주면 https://example.com/api/data?test=1&test=2&test=3&test=4&test=5 처럼 원하는 url을 보낼 수 있습니다.

 

import qs from "qs";

const arrayToSend = [1, 2, 3, 4, 5];

axios
  .get("https://example.com/api/data", {
    params: { test: arrayToSend },
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: "repeat" });
    }
  })
  .then((response) => {
    console.log(response.data);
  })

참조: https://doqtqu.tistory.com/371