[Nuxt.js] 郵便番号から住所を自動入力する

めだまやき

zipcloudさんが提供してくれてるAPIを使って住所を取得する

axiosがない場合は入れる

今回外部APIを叩くのに@nuxtjs/axiosを使うのでまだ入れてなかったら入れていく
また、CORSエラーが出ないように@nuxtjs/proxyも入れる

  • パッケージインストール
// ⭐️ axios入れる
npm install @nuxtjs/axios
// or
yarn add @nuxtjs/axios

// ⭐️ proxy入れる
npm install @nuxtjs/proxy
// or
yarn add @nuxtjs/proxy

  • nuxt.config.jsにそれぞれ追記
  modules: [
    '@nuxtjs/axios', // ⭐️ 追記
    '@nuxtjs/proxy', // ⭐️ 追記
  ],
  axios: { // ⭐️ 追記
    proxy: true,
  },
  proxy: { // ⭐️ 追記
    '/zipApi/': {
      target: 'https://zipcloud.ibsnet.co.jp',
      pathRewrite: {'^/zipApi/': ''},
    }
  },

使ってみる

(APIのURL) http://zipcloud.ibsnet.co.jp/api/search?zipcode=

試しに適当な郵便番号を入れてアクセスしてみると結果が見れる↓↓
http://zipcloud.ibsnet.co.jp/api/search?zipcode=5570011

  • form.vue サンプル
<template>
  <input v-model="zipcode" />
  <button @click="searchAddress">郵便番号から入力</button>
  <input v-model="address" />
</template>

<script>
export default {
  data() {
    return {
      zipcode: null,
      address: null,
    },
  },
  methods: {
    /**
     * 郵便番号から入力
     */
    async searchAddress() {
      // フォームで入力された郵便番号を入れたAPIを呼び出す
      this.$axios.$get(`/zipApi/api/search?zipcode=${this.zipcode}`).then((res) => {
        // 該当住所が存在しない場合はnullになる
        if (res.results == null) return
        // 該当住所があればaddressに代入する
        this.address = res.results[0]['address1'] + res.results[0]['address2'] + res.results[0]['address3'];
      })
    },
  },
}
</script>