2枚の画像を切り替えるチェックボックスをつくってみよう」では独自のコンポーネント(≒疑似HTMLタグ)を作って利用規約の同意で使ってみました。この記事を書いている時に、その昔クライアントさんからご要望があった「ちょっとめんどうな」セレクトボックスがあったことを思い出しました。年で生年月日を入力するセレクトボックスです。西暦ならセレクトボックスひとつで問題なのですが、これまで長い間お客さんのデータを和暦で管理してきた関係上、入力は和暦にしたいとのご要望でした。年で連携するセレクトボックスをつくってみます。学習の役に立ててくださいね。(最後に教材ソースコードをダウンロードできます。合わせて読みたいやりたいことまずセレクトボックスは次の2つです。年そして、「元号」を選択すると自動的に「年」の中身が元年〜その元号の最大年に変化するようにします。実際に開発を進めていきましょう!Vueの基本形をつくるでは、Vueが使えるように基本形を作り、ここにコンポーネントをつくっていきます。Vue本体はcdnから読み込んでいます。Vueコンポーネントをつくる今回のコンポーネントは元号と年のセレクトボックスが必要になり、さらに各セレクトボックスに様々なコードが必要になってくるので、構造は次のようにします。2)つまり、v-wareki-inputというコンポーネントの中に、v-wareki-gengo-inputとv-wareki-year-inputという2つの子コンポーネントが含まれている形になります。ひとつずつ開発していきましょう。元号を選択するセレクトボックスまずは次のように元号を選択できるセレクトボックスを自動生成するコンポーネントです。}});では重要な部分をひとつずつみていきましょう。propsvalueはv-modelの中身が入ってくる変数で、選択中された元号のインデックス番号です。後でつくる親コンポーネントから次のように利用します。v-model="gengoIndex"></v-wareki-gengo-input>template重要なのは、v-forを使って元号の選択肢を作っている部分です。$parent.gengoDataはこれからつくる親コンポーネントの変数gengoDataからデータをとってくるという意味になります。$parent.gengoData"watchvalueが変更されたらinputイベントを送出します。これによって親コンポーネントに値を伝えることができるようになります。年を選択するセレクトボックス続いて、年を選択するセレクトボックスですが、これは元号によって選択肢が自動的に変更になるようにします。}});では、ひとつずつみていきます。選択した元号に対応する最大年数の2つです。そのため、親コンポーネント内では、次のように2つの変数を格納するようにします。v-model="gengoYear"></v-wareki-year-input>つまり、maxGengoYearは先ほどの元号セレクトボックスが選択されたらすぐ自動的に切り替わる必要があります。(これについては親コンポーネントのcomputedで説明します)templateまず、v-forではmax、つまり最大年数分の選択肢を作成しています。max"また、表示するテキストは「1年」の場合は「元年」とするべきですので、year()というメソッドをつくり、この中で値が1の場合のみ「元年」を返すようにしています。watchこのコンポーネントでも、valueが変更されたらinputイベントを送出し、親コンポーネントへ値を伝えています。親コンポーネントでは最後に親コンポーネントです。2つの子コンポーネントを連携させるので複雑な部分もありますが、できるだけわかりやすく説明していきます。}});では、ひとつずつ見ていきます。(わかりやすく説明したいので順不同です)propsvalueはv-modelに対応する部分です。次のように初期値を西暦で入力すると、自動的に和暦に変換するようにします。v-model="2000"></v-wareki-input>data変数は次のとおりです。元号のマスターデータ。ここで一元管理したいので、子コンポーネントからは$parentとして呼び出しています。新元号になったらここにデータを追加するだけでOKです。ページ表示されてすぐかどうかかが分かる変数。Vueコンポーネントは関数の返り値として設定する必要があります。そのため、functionを使っています。computedcomputedの内容は次のとおりです。元号が選択されているかどうか。現在選択されている元号の最大年数template2つのこのコンポーネントをテンプレートとして呼び出し、それぞれ変数gengoIndexとgengoYearをバインディングしています。重要なのは、maxGengoYearの部分で、これはcomputedのmaxGengoYear()の結果が自動的に入るようにしています。methodscalcYear()は、元号と年の両方が選択された状態なら、それが西暦何年かを計算し、結果を$emitで呼び出し元に伝えています。次の場合、変数yearが自動的に更新されます。元号や年が選択されていないときはnullを返すようにしています。mountedvalue(西暦)に初期値が入っていたら、計算して元号と年をセットするようにしています。最後にinitializedをtrueに変更しています。(この部分は詳しくwatchで説明します)watchs変数gengoIndexとgengoYearに変更があったらcalcYear()で西暦を計算するようになっています。ここで重要なのがgengoIndexの次の部分です。12と和暦への変換が行われます。それぞれgengoIndexとgengoYearにその値が格納されることになるのですが、もしinitializedで守っていないとgengoIndexを変更した時点で、watchによって12が0に上書きされてしまうのです。mounted内でnextTick()を使っているのもそのためです。true;});nextTick()は一旦レンダリングが完了してから中身を実行するのですが、こうしないと同じくタイミング的にgengoYearは0に上書きされてしまいます。デモを用意しました実際のキャプチャ画像は次のとおりですが、画像だけでは分かりにくいかもしれませんので、実際に体験できるデモページを用意しました。Componentを含む)を以下からダウンロードできます。cdnでVueを読み込んでいるので展開してすぐ実行することができます。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。