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>
zipcloudさんが提供してくれてるAPIを使って住所を取得する