0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

郵便番号から自動で都道府県などの情報を取得したい!

Last updated at Posted at 2023-07-07

始まり

システム入力画面で
郵便番号、都道府県、市区町村、町域など分けて入力するようになっていたので、ユーザーの入力がとても大変だったので、
郵便番号を入力されたらその他の項目が自動で入力できたら楽だなと思いライブラリを探すことになりました。

更新自体は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)を実装する

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?