jQueryなどで郵便番号検索機能を実装する際はyubinbango.jsなどを使うことが多いかと思いますが、
Vue.jsでは「yubinbango-core2」という郵便番号のライブラリを
インストールすることで実装することが可能です。
(yubinbango-coreは不具合がありうまく実装できないのでyubinbango-core2をインストールする必要があります YubinBango module が export されていない · Issue #4 · yubinbango/yubinbango-core)
yubinbango-core2をインストール
npm i yubinbango-core2vueファイルに記述
<template>
<div class="xl:grid xl:grid-cols-2 text-sm">
<div class="flex flex-wrap flex-row mt-2">
<div class="w-4/12 px-4 py-2 font-semibold">郵便番号</div>
<input
type="text"
class="w-3/12 mr-2 px-4 py-2 border rounded"
v-model="formItem.zip"
/>
<button
class="bg-blue-600 text-white px-4 py-2 rounded whitespace-nowrap"
@click.prevent="searchAddress()"
>
住所検索
</button>
</div>
<div class="flex flex-wrap flex-row mt-2">
<div class="w-1/3 px-4 py-2 font-semibold">都道府県</div>
<input
type="text"
class="w-3/12 mr-2 px-4 py-2 border rounded"
v-model="formItem.pref"
/>
</div>
<div class="flex flex-wrap flex-row mt-2">
<div class="w-1/3 px-4 py-2 font-semibold">住所</div>
<input
type="text"
class="w-2/3 px-4 py-2 border rounded"
v-model="formItem.address"
/>
</div>
</div>
</template>
<script>
import { reactive } from "vue";
import { Core as YubinBangoCore } from "yubinbango-core2";
export default {
setup() {
const formItem = reactive({
zip: "",
pref: "",
address: "",
});
const searchAddress = () => {
new YubinBangoCore(formItem.zip, (value) => {
formItem.pref = value.region; // 都道府県 IDを取得したい時はregion_idと記述
formItem.address = value.locality; // 市区町村
formItem.address += value.street; // 町域
});
};
return {
formItem,
searchAddress,
};
},
};
</script>
ボタンのクリックイベントで郵便番号から住所を取得しています。(classにtailwind.cssでコーディングした名残がのこっています。。。)
yubinbango-core2を使えば簡単に住所検索を実装することができますのでぜひ試してみてください。
@changeイベントで住所検索する場合
ボタンのクリックイベントではなく郵便番号が入力された瞬間に住所を取得したい場合は少し工夫が必要でした。
<div class="w-4/12 px-4 py-2 font-semibold">郵便番号</div>
<input
type="text"
class="w-3/12 mr-2 px-4 py-2 border rounded"
v-model="formItem.zip"
@change="searchAddress" //changeイベント
/>@changeイベントの場合数字以外の文字列がフォームに入力されるとエラー画面になってしまいます。
ですので、正規表現で入力された値をチェックしてマッチしていたら住所検索をするという風に書いてあげると動きました。
const searchAddress = () => {
if (!formItem.zip.match(/^\d{3}-?\d{4}$/)) { //入力された値をチェック
return false
}
new YubinBangoCore(formItem.zip, (value) => {
formItem.pref = value.region; // 都道府県 IDを取得したい時はregion_idと記述
formItem.address = value.locality; // 市区町村
formItem.address += value.street; // 町域
});
};関連記事
