Vue.js에서 자동으로 우편 번호 주소 입력
2158 단어 Vue.js
지금은 유빈뱅고라는 도서관이 있어 더욱 쉽게 이용할 수 있다.
이것은 매우 편리하다
하지만 이번엔 유빈뱅고가 아닌
그 핵심 라이브러리의 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
Reference
이 문제에 관하여(Vue.js에서 자동으로 우편 번호 주소 입력), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kiyc/items/752f5a167c975582ebc2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)