FrontEnd

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

投稿日:

はじめに

こんにちは、naoki85です。
今回はよくあるパターンですが、1つめのセレクトボックスを選択したら、次のセレクトボックスの項目を変えてみます。

サンプル

実際のサンプルはこちらです。
良い例が思いつかなかったので、このブログのカテゴリとタグを例にしてみました(笑)

とりあえず作ってみる

まずはソースコードを載せ、その後、説明を入れたいと思います。

ソースコード

セレクトボックスにv-modelでバインド

セレクトボックスの変更に対応して、selectedCategoryの値を変えるため、v-modelで双方向バインディングします。
値が変わったタイミングでメソッドを呼びたいので、v-on:changeを使用します。

なお、v-on:changeは下記のように省略形で書けます。
v-on 省略記法

<option>はv-forでリストレンダリング

フォーム入力バインディング

v-forを使用してリストレンダリングする際、value属性にcategory.idをバインドすることで、その値を持たせることができます。

また、v-bindも省略記法があります。
v-bind 省略記法

メソッドを呼んで、プロパティの値を変更

セレクトボックスが変わったタイミングで、fetchTasksメソッドを呼んで、tagsの値を変えます。
今回はメソッド内でタグの値をベタ書きしていますが、configやAPIで取得することを想定しています。

tagsの値が変われば、タグの方でもv-modelを設定しているので、セレクトボックスが変わります。

tagsがセットされたら、タグのセレクトボックスを表示

とりあえずこれで動きはするのですが、tagsがセットされるまではタグのセレクトボックスを非表示にしておこうと思います。

JavaScriptのlengthで、tagsの配列長を取得してそれに応じて表示させたいと思います。

さいごに

簡単ですが、今回は以上になります。

次回はテストかVuexを扱いたいな、と思っております。
(ただ、主にRailsにVue.jsを載せることを考えているので、Rails側でテストコードを書こうかな、と悶々としております。)

page_footer_300rect




page_footer_300rect




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

page_side_300rect

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。
下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

リンク

follow us in feedly
2017年9月
« 8月 10月 »
 12
3456789
10111213141516
17181920212223
24252627282930