コンポーネントに prop を追加する

完了

現在の予約の一覧を表示するコンポーネントを作成して、アプリケーションの作成を続けましょう。 ユーザーが予約を追加するために使用できるフォームを追加します。そのため、これから静的配列を作成します。

コンポーネントを作成する

最初に、コンポーネントを作成します。

1. Visual Studio Code で、BookingList.vue という名前のファイルを src/components に作成します。

2. BookingList.vue で、「vue」と入力して、スニペット メニューから <[vue]> [with default.vue] (default.vue を使用) を選択します。

   

   スニペットによって既定の構造が作成されます。

prop と計算値を登録する

予約に関する情報の配列を想定しているので、prop を Array 型として宣言します。 コンポーネントを作成しているので、計算プロパティを利用して自動的に値を計算することもできます。 合計価格を加算して使用できる表示値を返す、計算プロパティを追加しましょう。

1. まだ開いていない場合は、src/components/BookingList.vue を開きます。

2. export default の中かっこ ({ }) の中に、次のコードを追加して bookings という名前の prop と computed プロパティを作成します。

   props: {
       bookings: Array
   },
   computed: {
       totalDisplay() {
           let totalCost = 0;
           if (this.bookings && this.bookings.length > 0) {
               totalCost = 
                   this.bookings.map(b => b.price)
                               .reduce((a, b) => a + b);
           }
           return '$ ' + totalCost.toLocaleString('en-US');
       }
   }
   

   totalDisplay が this を使用して bookings prop にアクセスできる方法に注目してください。このようにして、データや、コンポーネントの一部として宣言された他のプロパティにアクセスできます。 bookings に記載されているすべての価格の合計を計算し、文字列の表示を作成するコードを作成します。

表示するテンプレートを追加する

予約の情報を表示するテンプレートを追加しましょう。 v-for を使用して、すべての予約と、前に作成した totalDisplay 計算プロパティをループ処理しましょう。

1. まだ開いていない場合は、src/components/BookingList.vue を開きます。

2. <template> 要素内に、次の HTML を追加します。

   <section>
   <h2>
       Here's your current bookings:
   </h2>
   
   <div class="row" v-for="(booking, index) in bookings" :key="index">
       <div>{{ booking.name }} </div>
   </div>
   
   <h3 class="row">
       Total: {{ totalDisplay }}
   </h3>
   </section>
   

   このコードは v-for によってすべての予約を反復処理し、cabin を表示します。 次に、totalDisplay を呼び出してすべての予約の合計コストを表示します。

コンポーネントをメイン ページに追加する

作成したコンポーネントを使用して、予約の一覧を渡しましょう。

1. src/components/Host.vue を開きます。

2. 最初の <script> タグの下と export default の前に新しい行を追加します。

3. 次のコード (コメントを含む) を追加して、BookingList コンポーネントをインポートします。

   import BookingList from './BookingList.vue';
   // TODO: Register next component
   

4. このコンポーネントを登録するには、次のコード (コメントを含む) を TODO: Add components コメントの下に追加します。

   components: {
       BookingList,
       // TODO: Add next component
   
   },
   

   重要

   今後さらに値を追加するため、2 つのコンマが必要です。

コンポーネントを使用する

コンポーネントが登録されたら、これをページで呼び出しましょう。 前に作成した bookings 配列を使用して、予約の一覧をページでシード処理します。

1. まだ開いていない場合は、src/components/Host.vue を開きます。

2. TODO: Add booking-list コメントの下に、次のコードを追加して booking-list コンポーネントを使用します。

   <booking-list :bookings="bookings"></booking-list>
   

ページをテストする

コンポーネントを登録して構成したので、ページをテストしてみましょう。

1. [ファイル]>[すべて保存] を選択して、すべてのファイルを保存します。

2. http://localhost:8080 のブラウザー ウィンドウに戻り、ページを更新します。

   ページには、サンプルの予約が表示されるようになります。

   

おめでとうございます。 prop を使用してコンポーネントを作成しました。