[TIL] 20211125 props default/ typescript error 처리/ vue option api model

1. props undefined error

부모에서 api를 호출해서 ref오브젝트에 넣어서 props로 요소들을 넘기고 있는데..

undefine으로 넘어간다.

아마도 값이 들어가기 전에 props로 넘기고 있는 것 같다.

근데 props를 찍어보니 잘 나온다.. 대체 왜이러냐!!

props에서 required true였던 것에 default 를 설정해주니까 사라졌음

 

 

2. typescript에서 에러 처리

const getOrderDetail = async () => {
            try {
                //코드
            } catch (e) {
                window.alert(e.data.meta.resultMsg);
            }
        };

타입스크립트에서 e의 타입을 안정해주니까 e안에 data가 있는지 그 안에 meta가 있는지 모르니까 에러가 난다.

alert((e as AxiosResponse<AResponse>).data.meta.resultMsg);
AResponse => 이 프로젝트에서 정의한 에러

이 비동기 코드는 axios 요청 코드이므로 AxiosResponse의 타입을 정의하면 된다!

 

 

3. option api 에서 model

model: {
        props: 'value',
        event: 'change',
    },

vue2코드에서 model이라는 코드를 발견했다. 

props의 value를 v-model로 바인딩 하겠다는 뜻이겠지 ? 하고 

composition api 로 바꿔보았다. 

 

setup(props, { emit }) {
        const isOpen = computed({
            get() {
                return props.value;
            },
            set(value) {
                emit('change', value);
            },
        });
        return {
            isOpen,
        };
    },

computed 에서 getter와 setter로 바인딩을 해주었다.