Vue3 Composition API 사용 기록 (기록용)

1.v-model 자식 컴포넌트에서 부모로 이벤트 전달

const show = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value);
  },
});

2.자바 스크립트 filter

const serviceTypeName = (serviceType) => {
  const result = CHNL_DVCD.value.filter((code) => code.value === serviceType);

  return result[0].text;
};

const filterData = data.value.filter(
  (item) => (item.previousAdministratorId = item.administratorId)
);

const administratorName = (administratorId) => {
  const result = data.value.filter(
    (Id) => Id.administratorId === administratorId
  );

  return result[0].manager + '(' + administratorId + ')';
};

원하는 조건으로 필터링

3.부트스트랩 Modal 확인버튼 커스텀하기

  <template #ok>
      <BButton @click="answerComplete">확인</BButton>
    </template>

const emit = defineEmits(['ok']);
const answerComplete = async () => {
  state.answerDay = moment(new Date()).format('YYYY-MM-DD');
  state.answerState = 'ST05';
  await addAnswer(state);
  emit('ok');
};

Modal 내장 ok에 이벤트를 발생시켜 닫히게 하거나 만약 요청에 에러가 있다면 확인을 클릭해도 닫히지 않게 할 수 있다.

4.Axios Api 작성기록

export async function getList(params) {
  
  return await http.get(`${baseUri}/getList`, { params });
}

export async function getCategoryList(params) {
 
  return await http.get(`${baseUri}/getCategoryList?serviceTypeList=${ params }`);
}

export async function getCategoryListTest(params) {
  return await http.get(`${baseUri}/getCategoryListTest`, { params });
}

export async function saveCategoryList(params) {
 
  return await http.post(`${baseUri}/saveCategoryList`,params);
}

export async function getAnswer(params,params2){
  const result = await http.get(`${baseUri}/getAnswer?oneononeInquiryNumber=${params}&answerState=${params2}`);
  
  return result;
}

export async function addAnswer(params) {
  console.log(params);
  return await http.post(`${baseUri}/addAnswer`, params);
}

5.자식 <-> 부모간 전달의 다양한 방식
1.Props,emit
2.Provide/inject
3.Vuex

1 -> 2-> 3 으로 갈수록 범위가 더 넓어진다 단순히 자식 부모간의 관계라면 1로 글로벌한 케이스는 Vuex로 모듈화해서 사용한다