FrontEnd

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

投稿日:2017年9月25日 更新日:

はじめに

こんにちは、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側でテストコードを書こうかな、と悶々としております。)

おすすめ書籍

基礎から学ぶ Vue.js  Vue.js入門 基礎から実践アプリケーション開発まで  Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

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

CAPTCHA


関連記事

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

react-icon

React Big Calendarの複数タイムゾーン対応

1 はじめに2 端末のタイムゾーンのみに対応する場合3 複数のタイムゾーンに対応する。3.1 日時を指定のタイムゾーンに変換する3.2 イベントの開始日時・終了日時を動的に設定する3.3 ラップクラス ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに1.1 Vuetifyとは2 Vuetifyを導入する2.1 パッケージを追加する2.2 TypeScriptを採用している場合3 Vuetifyのコンポーネント3.1 Applicati ...

js

WebページにGoogleMapを配置する

1 はじめに2 準備2.1 API Keyを取得する3 簡単な実装3.1 サンプルコード4 タップした位置にマーカを動かす4.1 サンプルコード5 場所を検索する5.1 サンプルコード6 画面例7 さ ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年9月
 12
3456789
10111213141516
17181920212223
24252627282930

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。