始まり
システム入力画面で
郵便番号、都道府県、市区町村、町域など分けて入力するようになっていたので、ユーザーの入力がとても大変だったので、
郵便番号を入力されたらその他の項目が自動で入力できたら楽だなと思いライブラリを探すことになりました。
更新自体は4年前で止まっていますが、システムの安全性の調査値はそこまで低くないみたいなので、こちらのライブラリを使うことにしました!
yubinbango-core2
導入
npm install yubinbango-core2
Vue側のscriptタグ辺りにimport文を追可
import {Core as YubinBangoCore} from "yubinbango-core2"
Vueの使いたいところでYubinBangoCoreを呼び出す
ESLint入れていて書き方について少し詰まりました笑
methods() {
// 郵便番号から住所自動入力
changeAddress() {
const yubinBangoCoreClass = new YubinBangoCore();
yubinBangoCoreClass.constructor(this.form.postcode, (addr) => {
this.form.prefecture_id = addr.region_id;
this.form.address = addr.locality + addr.street;
});
},
参考文献
Vue.js3系(composition API)で郵便番号から住所検索機能(yubinbango-core2)を実装する