リストのレンダリングを練習する

  • 3 分

ユーザーは、クルーズに予約することを決断する前に、利用できるオプションとそのコストを知りたいと思います。 これらのオプションを表示してみましょう。

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

このモジュール用のスターター リポジトリが用意されています。

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

    git clone https://github.com/MicrosoftDocs/mslearn-vue-dynamic-render/
cd mslearn-vue-dynamic-render/start
code .

  2. index.js ファイルを開きます。 productClasses の配列に注目してください。 各 productClass には、name、price、seatsAvailable、earlyBird プロパティがあります。

オプションと価格のリストを表示する

HTML コードを更新して、オプションとその価格のリストを表示してみましょう。

  1. index.html ファイルを開きます。

  2. "TODO: Add code to display classes" というコメントの後の行に次の HTML コードを追加します。

    <div v-for="(productClass, index) in productClasses" :key="index" class="row">
    <div class="column">
        {{ productClass.name }}
    </div>
    <div class="column">
        $ {{ productClass.price.toLocaleString('en-US') }}
    </div>
    <!-- More to come -->

</div>

コードを調べる

前述のコードでは、v-for ディレクティブによって、productClass 項目ごとに新しい div 要素が作成されます。 このコードでは、各項目の index も生成されます。これを表示の :key として使用します。 最後に、コードによって、各 productClass 項目の name と price が表示されることを確認できます。

Note

ここで、 toLocaleString の呼び出しに注目してください。 二重中かっこ ({{ }}) 内で作業しているため、有効な JavaScript を呼び出すことができます。 また、ロケール文字列は現在、en-US に設定されていますが、特定の地域に合わせて更新することもできます。

Live Server でページを開く

Visual Studio Code の Live Server 拡張機能を使用すると、変更が検出されたときにページを自動的に更新する開発用 Web サーバーを作成できます。 この拡張機能をインストールしたら、これを使用してページをホストできます。

  1. すべてのファイルを保存します。

  2. Visual Studio Code で、Ctrl + Shift + P キー (Mac では Cmd + Shift + P キー) を押して、コマンド パレットを開きます。

  3. 「Live Server: Live Server で開く」と入力します。

    右下のメッセージで、ページが現在 http://localhost:5500でホストされていることを確認できます。

  4. ブラウザーを開き、http://localhost:5500 に移動します。

作成したページが表示されます。

Screenshot of page displaying list of options and their prices.