[Vue.js] ant vue modal 등록하기

ant vue modal 등록하기

프로젝트에서 Vue, Spring boot로 이루어진 관리자용 웹을 맡고 있습니다. 이번엔 모달로 회원에 관련된 간단한 정보를 등록해 리스트로 볼 수 있는 기능이 필요해서 ant vue 공식문서를 참고해 구현했습니다.

      <div df fdr fje>
        <a-button @click="showItemCreateModal">아이템 등록</a-button>
         <a-modal v-model="visible" title="아이템 등록" on-ok="createItem">
          <template slot="footer">
            <a-button key="back" @click="cancelItemCreateModal">
              취소
            </a-button>
            <a-button key="submit" type="primary" :loading="loading" @click="createItem">
              생성하기
            </a-button>
          </template>
          <div df fdr fje>
            <span>아이템 이름</span>
            <a-input v-model="model.name"/>
          </div>
        </a-modal>
      </div>

모달 팝업 버튼 showItemCreateModal 메서드와 template slot footer로 구성된 HTML 코드입니다. 모달 내에서 회원 아이템 정보인 이름을 받아 서버에 저장하는 목적으로 기능을 구현했습니다.

vue 코드는 메인 컴포넌트에 모달 팝업 여부를 boolean 타입으로 지정해줄 수 있는 visible, 모달이 닫힐때까지 시간을 정해줄 수 있는 setTimeout 메서드에 사용될 boolean 타입 loading과 서버에 전달해줄 데이터 model까지 설정해줍니다.

@Component
export default class Member extends Vue {

    loading = false;
    visible = false;

    model = {
        name: ""
    }

    showItemCreateModal() {
        this.visible = true;
    }

    async createItem() {
        this.loading = true;
        await MemberApi.create(this.model);
        setTimeout(() => {
            this.visible = false;
            this.loading = false;
        }, 1000);
    }

    cancelItemCreateModal() {
        this.visible = false;
    }
}

async와 await는 자바스크립트 비동기식 처리 패턴입니다. 콜백함수와 프로미스의 단점을 보완해서 읽기 좋은 코드로 개선한 패턴이죠. async와 await은 다음 메서드를 시작하기 전에 HTTP 통신으로 return 되는 값을 받을 때까지 기다립니다. 리턴을 기다렸다 다음 메서드를 실행하는 순서를 정해주는거죠. 기다리는동안 자바스크립트는 비동기 메서드 외 다른 작업을 처리해줄 수 있습니다. 리턴이 완료되면 다시 해당 메서드로 돌아와서 작업을 이어줍니다.

---

참고자료

• ane vue - modal
• 캡틴판교 - 자바스크립트 async와 await