質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

1回答

4178閲覧

nuxt.jsでajaxzip3.jsを使用して住所の補完がしたい

kstyle

総合スコア13

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2019/09/13 06:17

編集2022/01/12 10:55

nuxt.jsで作られているものに郵便番号の補完機能を追加で、
ajaxzip3.jsを使用して行ったところ、外部jsとして読み込んでも、

また、イベントが発火せず何も起こらない状態です。

js が読み込まれ、郵便番号が入力されたら都道府県と市町村が補完されることがのぞみです。
typ
どうぞご教授よろしくお願いいたします。

試したこと

ajaxzip3.jsについては公式サイトに書いてあるURLを、
Nuxt.jsの外部ファイルの読込みの方法で読み込み
head: {
script: [
{ src: 'https://ajaxzip3.github.io/ajaxzip3.js', charset:"UTF-8" },
],
},
v-on:keyup=""AjaxZip3.zip2addr(postCode01,postCode02,prefecture,address)"
v-on:keyupイベントに関しては全く反応なし

index.vue(indexからheade、form、footerをimport)
header.vue
form.vue(formからinput、inputshort、selectをimport)
input.vue
select.vue
footer.vue

form

<FormLabel labelName="郵便番号" isRequired="true"></FormLabel> <div class="PostCode-wrap"> <div class="is-flex is-flex-one is-alignItemsCenter"> <InputboxShot ID="postCode01" labelRequire="true" inputLabel="〒" textFiledType="postCode01" maxLength=3 class="postCode01" v-model="postDT.xxxxx.postCode01"> </InputboxShot> <InputboxShot ID="postCode02" inputLabel="ー" textFiledType="postCode02" placeholderText="例)8510" maxLength=4 class="postCode02" v-model="postDT.xxxxx.postCode02"> </InputboxShot> </div> </div> <FormLabel labelName="都道府県" isRequired="true"></FormLabel> <div class="Select-wrap"> <Selectbox ID="prefecture" labelRequire="true" @xxxxx-code="xxxxx" :confirmError="$store.state.registrationErrors.companyAddressPrefecture && $store.state.registrationErrors.companyAddressPrefecture" v-model="postDT.companyAddressPrefecture"> </Selectbox> </div> </div> <FormLabel labelName="市区町村" isRequired="true"></FormLabel> <iInputbox ID="address" textFiledType="text" placeholderText="例)aaaaa" textFiledSize="default" labelRequire="true" maxLength=40 v-model="postDT.address"> </iInputbox> </div> <script> import Inputshortbox from '@/components/BBBBB/Inputshortbox' import Inputbox from '@/components/BBBBB/Inputbox' import Selectbox from '@/components/BBBBB/Selectbox' export default { components: { InputboxShot, Inputbox, Selectbox, }, data() { return { postDT: { aaaaa, bbbbb, } } }, } </script>

inputshortbox.vue

<template> <div class="FormItem" :class="{isError: confirmError}"> <div class="FormItem-innerBottom"> <label v-if="inputLabel" :class="{isName: nameLabel}">{{inputLabel}}</label> <input v-if="textFiledType == 'postCode01'" :id="ID" class="TextField" type="text" :placeholder="placeholderText" :value="value" :maxlength="maxLength" v-on:input="$emit('input', $event.target.value)" /> <input v-else-if="textFiledType == 'postCode02'" :id="ID" class="TextField" type="text" :placeholder="placeholderText" :value="value" :maxlength="maxLength" v-on:input="$emit('input', $event.target.value)" /> </div> </div> </template> <script> export default { props: [ "ID", "inputLabel", "textFiledType", "placeholderText", "value", "confirmError", "maxLength", "postalCode", "nameLabel", "noneMessege" ], computed: { textExist() { return this.$props.value.length; } } }; </script>

select.vue

<template> <div class="Selectbox" :class="{isError: confirmError}"> <select :id="ID" :class="{isSelected: selected}" v-model="selected" @change="handleSelected"> <option disabled value>選択してください</option> <option v-for="prefecture in prefectures" :key="prefecture.code" :value="`${prefecture.name}`" >{{prefecture.name}}</option> </select> </div> </template> <script> import { prefectures } from "~/assets/data/prefectures.json"; export default { props: ["ID", "value", "confirmError"], data() { return { selected: "", prefectures }; }, methods: { handleSelected() { this.$emit("input", this.selected); this.xxxxxCode(); }, fetchPrefecureCode() { const xxxxx = this.xxxxxs.filter( xxxxx => xxxxx.name === this.selected ); this.$emit("xxxxx-code", xxxxx); } }, mounted() { setTimeout(() => { this.selected = this.$props.value; this.xxxxxCode(); }, 1500); } }; </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Ajaxzip3はプレーンなフォームに入力することに特化していて、Nuxtのような仮想DOM環境とはうまく整合しません

yubinbango-coreのような別ライブラリを使ったほうがいいでしょう(参考)。

投稿2019/09/13 06:23

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kstyle

2019/09/13 06:26

ありがとうございます。 試してみます。
kstyle

2019/09/19 06:50

coreに変えてみましたが、読み込むことができません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問