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 ベースのフレームワークによるシングルページアプリケーション開発

page_footer_responsive




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

react-icon

MUI Themeでカラー、シャドウ、フォントなどを設定する

1 はじめに2 Themeとは3 Themeのセットアップ4 Themeの設定方法4.1 Palette4.1.1 colorオブジェクト4.1.2 直接色を指定する4.2 Elevationのシャド ...

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

Next.js 入門してみた

1 はじめに1.1 なぜNext.jsなのか?2 Next.jsとは何か2.1 Static Site Generation (SSG)2.1.1 Incremental Static Regener ...

Go言語

Go WebAssemblyでPromiseを使って非同期化してみた

1 はじめに2 Go WebAssemblyで非同期化のコード3 Promise化する4 おまけ5 さいごに6 おすすめ書籍 はじめに 先日WebAssemblyに入門して、実際に以下のチュートリアル ...

react-icon

react-intl (Format.js) を使ってi18n対応

1 はじめに2 react-intlとは?3 react-intlの導入4 使い方4.1 IntlProviderの実装4.2 メッセージ定義4.3 <Foramatted*>コンポーネン ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年9月
 12
3456789
10111213141516
17181920212223
24252627282930

アプリ情報

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