Vue.js에서 자동으로 우편 번호 주소 입력

2158 단어 Vue.js
자바스크립트에서 우편번호를 자동으로 입력하는 주소로 유명한 도서관에는 aaxzip3이 있다.
지금은 유빈뱅고라는 도서관이 있어 더욱 쉽게 이용할 수 있다.
이것은 매우 편리하다
하지만 이번엔 유빈뱅고가 아닌
그 핵심 라이브러리의 Yubin Bango-Core.
ajaxzip3이든 Yubin Bango든 내부에서 Yubin Bango-Core를 사용합니다.
왜 Yubin Bango-Cole일까요?
이번엔 Vue.js에서 제작한 프론트 데스크톱에서 자동으로 주소를 입력할 수 있습니다
YubinBango는 단독으로 사용한다고 생각하세요, Vue.js부터 사용하기 어려워요.
구체적으로 input의value가 바뀌어도 input과 관련된 Vue.js내의 데이터는 변화가 없네요.겉으로만 가치를 바꾸는 것도 의미가 없다.
그래서 Vue.js부터 YubinBango-Core를 사용합니다.
정말 npm install yubinbango-core부터require 등으로 읽고 싶은데 잘 안 된다.누가 나에게 알려줄 수 있습니까
다른 방법이기 때문에, 여기는 js를 직접 읽습니다.
<script src="https://yubinbango.github.io/yubinbango-core/yubinbango-core.js" charset="UTF-8"></script>
이어서 블루.js내watch 우편번호입니다.
export default {
    data() {
        return {
            zip: null,
            pref_id: null,
            locality: null,
            street: null,
        }
    },
    watch: {
        zip: function(zip) {
            let _this = this
            new YubinBango.Core(zip, function(addr) {
                _this.pref_id  = addr.region_id // 都道府県ID
                _this.locality = addr.locality  // 市区町村
                _this.street   = addr.street   // 町域
            })
        }
    }
}
주의점은 new YubinBango.Core()의 호출중this이 Vue라는 것이다.js가 아니니까this변수에 Vuethis를 추가합니다.js 데이터를 조작해야 합니다.그리움
이렇게 하면 자동으로 주소를 보충할 수 있다.단순성
근데 진짜 보고 싶다require

좋은 웹페이지 즐겨찾기