모달창 입력값 초기화 | vue.js

<모달창 입력값 초기화 |  vue.js>

this.$router.go()
모달창에 필요 값을 적고 등록하면 모달창이  꺼지도록(hide) 설정해놓았는데 문제는 다시 새롭게 모달창을 키면 방금 등록시 적었던 값들이 지워지지 않고 그대로 적혀있던 문제가 발생.
 this.$router.go()으로 해결. 그런데 설정해 놓은 모달창이 꺼지는 동시에 인터넷창 자체가 새로고침됨. 원래 원했던 것은 모달창의 순수한 값들만 모달창이 꺼진 후 다시 켰을 때 초기화로 셋팅 되는 것인데... 인터넷 창이 새로고쳐져서 뭔가 아쉽네...

검색
router.go(n)
이 메소드는 window.history.go(n)과 비슷하게 히스토리 스택에서 n 만큼 앞, 뒤로 이동하는 메소드입니다.

// 한 단계 앞으로 갑니다. history.forward()와 같습니다. history.forward()와 같습니다.
router.go(1)

// 한 단계 뒤로 갑니다. history.back()와 같습니다.
router.go(-1)

// 3 단계 앞으로 갑니다.
router.go(3)

// 지정한 만큼의 기록이 없으면 자동으로 실패 합니다.
router.go(-100)
router.go(100)
출처: https://beomy.tistory.com/70 [beomy:티스토리]

 location.reload()  이것도 새로고침과 같은 효과가 나네


* 인터넷창이 새로고침되면 부자연스러우니까 새로고침 없는 해결법 | eventBus 사용
eventBus는 2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법이다. 컴포넌트 간 통신은 항상 상위-하위 구조를 유지해야 데이터를 주고 받을 수 있는데 eventBus를 사용하면 이런 상위-하위 관계를 유지하고 있지 않아도 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달할 수 있다.  이벤트 버스를 구현하려면 애플리케이션 로직을 담는 인스턴스와는 별개로 새로운 인스턴스를 1개 생성하고 새 인스턴스를 이용하여 이벤트를보내고 받는다. 보내는 컴포넌트에서는 $emit()을, 받는 컴포넌트에서는 $on()을 사용한다.

페이지가 부모 페이지 이고, 모달창이 자식 페이지인데, 

부모페이지(partner > modify.vue)에  eventBus.$emit('init-value')을  추가해준다
eventBus를 사용해서 emit이 실행한다는 거고, init-value는 초기화를 의미. 

 

addSalesChannelToPartner() {
      this.partner.salesChannels.push(this.selectedSalesChannel)
      this.$http.post(
        'partner/' + this.partner.partnerCode + '/saleschannel',
        this.selectedSalesChannel
      ).then(response => {
        console.log('response', response)
        if (response.status === 201) {
          this.$message.success(this.$t('messages.messageSuccessRegisterPartnerSalesChannel'))
          this.init()
          eventBus.$emit('init-value')          // call
          this.$bvModal.hide('modal-select-sales-channel')
        }
      }).catch(error => {
        console.log(error)
      })
    }

자식페이지(SelectSalesChannelModal.vue)에 추가해준다.
eventBus.를 사용해서  on이 실행한다는 거고 다 끝나고  off를 해줘서 끝내야 한다 아니면 계속 쌓인다.

mounted() {
    eventBus.$on('init-value', () => {           // listen
    this.selectChannelIndex = null   // 이건 선택하는거라 null로 해준다.
      this.alias = ''   // 이렇게 하나하나 빈값으로 할 것을 적어준다.
      this.sellerId = ''
      this.channelKey = ''
      this.inboundConnectionUseStatus = 'N'
      this.inboundConnectionInfo = ''
      this.extraData = ''
      this.fetchStatus = 'INACTIVE'
      eventBus.$off('init-value')
    })

: 등록한 뒤 새로고침이 안되고 모달창만 자연스럽게 꺼진 뒤,  새로 등록 모달창을 켰을 때 빈값으로 잘 나온다.