Vue 우편주소 검색

Terminal

npm i vuejs-daum-postcode

 

Main.vue

<template>
  <input id="inputAddress1" class="form-control" v-model="companyAddr1" readonly>
  <button type="button" class="btn btn_sub mt05 addrClick" @click="daumShow">주소 검색</button>

  <DaumPostcode v-model="daumPostShow" @statChange="daumShow" @address-event="address"/>
</template>

<script>
import DaumPostcode from '@/components/DaumPostcode'

export default {
  name: Profile,
  components: {
    DaumPostcode
  },
  data() {
    return {
      daumPostShow: false,
      companyAddr1: ''
    }
  },
  methods: {
    statChange() {
      this.$emit("statChange")
    },
    daumShow() {
      this.daumPostShow = !this.daumPostShow
    },
    address(address) {
      this.companyAddr1 = address
    }
  }
}

 

DaumPostcode.vue

<template>
  <b-modal
    id="daumPost"
    v-model="daumPostShow"
    @hide="statChange"
    size="md"
    no-close-on-backdrop
    no-close-on-esc
    scrollable
    centered
    hide-footer>
    <template #modal-header="{ close }">
      <h5 class="modal-title">주소 검색</h5>
      <button type="button" class="close" @click="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </template>
    <template #default="{ hide }">
      <DaumPostcode
        :on-complete=handleAddress
      />
    </template>
  </b-modal>
</template>

<script>
import DaumPostcode from 'vuejs-daum-postcode'

export default {
  name: 'App',
  components: {
    DaumPostcode
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      daumPostShow: this.value,
      invalidMessage: ''
    }
  },
  watch: {
    value(newVal) {
      this.daumPostShow = newVal;
      if (newVal) this.invalidMessage = ''
    },
  },
  created() {
    if (this.value) {
      this.daumPostShow = this.value;
    }
  },
  methods: {
    statChange() {
      this.$emit("statChange")
    },
    handleAddress(data) {
      let fullAddress = data.address
      let extraAddress = ''
      if (data.addressType === 'R') {
        if (data.bname !== '') {
          extraAddress += data.bname
        }
        if (data.buildingName !== '') {
          extraAddress += (extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName)
        }
        fullAddress += (extraAddress !== '' ? ` (${extraAddress})` : '')
      }
      this.$emit('address-event',fullAddress)
      this.daumPostShow = !this.daumPostShow
    }
  }
}
</script>