演習 - データをフォームにバインドする - Training

4 分

ここでは、ユーザーが宇宙に行くクルーズを予約できるようにする架空のアプリケーションを更新します。月旅行を予約できるフォームを追加します。

スターターリポジトリを複製してコードを調べる

このモジュールには、スターターリポジトリが関連付けられています。このスターターを使用すると、このモジュールの概念のみに焦点を当てることができます。

Git と Visual Studio Code がインストールされている必要があります。 Visual Studio Code では、Live Server 拡張機能が必要です。

次のコードを実行して、スターターリポジトリを複製し、Visual Studio Code でフォルダーを開きます。

git clone https://github.com/MicrosoftDocs/mslearn-vue-data-events
cd mslearn-vue-data-events/starter
code .

スターターアプリケーションには、使用するコアデータモデルが既に含まれています。 product には、空いている cabins の一覧など、クルーズ自体に関する情報が含まれています。 booking オブジェクトを使用して、ユーザーが予約用に選択したオプションを格納します。設定は index.js ファイルで確認できます。

フォームを作成する

ユーザーが予約を設定するために使用するフォームを作成します。

Visual Studio Code で index.html ファイルを開きます。

TODO: Add booking form コメントの後の行に次の HTML を追加します。

<!-- TODO: Add booking form -->
<form v-show="!booking.completed">
    <h2>Book now!</h2>
    <div class="row">
        <label for="product-cabin">Select class:</label>
        <select id="product-cabin" v-model="booking.cabinIndex">
            <option v-for="(cabin, index) in product.cabins" :value="index">
                {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
            </option>
        </select>
    </div>
    <div class="row">
        <label for="notes">Notes:</label>
        <textarea v-model="booking.notes" rows="3"></textarea>
    </div>
    <div class="row">
        <!--TODO: Add button later -->


    </div>
</form>

コードを分割する

ページに追加した HTML コードを調べてみましょう。

form 要素

<form v-show="!booking.completed">

form 要素は、通常の HTML フォーム要素です。追加したキー属性は、v-show です。これを使用すると、Vue.js の項目の表示を切り替えることができます。この設計では、予約が不完全な場合に項目を表示する必要があります。 v-show を !booking.completed に設定することで、予約が ! (ではない) completed ときにフォームが表示されることを示します。

キャビンの select 要素

<select id="product-cabin" v-model="booking.cabinIndex">
    <option v-for="(cabin, index) in product.cabins" :value="index">
        {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
    </option>
</select>

select 要素を使用して、空いているキャビンの一覧を表示します。選択された値 (インデックスになります) を booking.cabinIndex にバインドする必要があります。

空いているキャビンの一覧は、product.cabins 内にあるため、v-for を使用して、ドロップダウンリスト用のオプションの一覧を作成します。各オプションの value を index に設定します。また、キャビンの name とその price の表示を作成します。

メモのテキスト領域要素

<textarea v-model="booking.notes" rows="3"></textarea>

booking.notes オプションを textarea にバインドします。 rows 属性を 3 に設定してサイズを設定します。

TODO コメント

ボタンを追加する TODO リマインダーに注意してください。このモジュールで後ほどイベントハンドラーの作成方法を学習した後、ここにボタンを配置します。

ヒント

TODO コメントは、完了する必要のあるタスクについてメモを作成するのに便利な方法です。

結果をテストする

更新されたページを見てみましょう。

[ファイル]>[すべて保存] を選択して、すべてのファイルを保存します。
Ctrl + Shift + P キーを押してコマンドパレットを開きます。 Mac では、Cmd + Shift + P キーを押します。
「Live Server」と入力し、Live Server: Open with Live Server を選択して、Live Server を確実に実行します。
ブラウザーで http://localhost:5500 にアクセスしてください。

ページに次の画像が表示されます。

Screenshot of the newly created form.

以上で、Vue データがフォームにバインドされました。

続行

演習 - データをフォームにバインドする

スターター リポジトリを複製してコードを調べる