カスタム イベントをコンポーネントに追加する

  • 7 分

フォームを追加してアプリケーションを完成させましょう。 フォームには、ユーザーが目的のキャビンを選択するためのドロップダウン リストと、クルーズを予約するためのボタンがあります。 これを新しいコンポーネントとして設定し、ボタンのイベントを作成します。 最後に、この新しいコンポーネントを Host.vue から呼び出します。

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

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

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

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

    Screenshot of the snippets menu with the snippet selected.

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

コンポーネントのコードを追加する

このコンポーネントが使用するコードを追加しましょう。これには prop、出力、データ、およびメソッドの登録が含まれます。

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

  2. export default の中かっこ ({ }) 内に、次のコードを追加してコンポーネントを構成します。

    props: {
    cabins: Array,
},
emits: ['bookingCreated'],
data() {
    return {
        cabinIndex: -1
    }
},
methods: {
    bookCabin() {
        if(this.cabinIndex < 0) return;
        this.$emit('bookingCreated', this.cabinIndex);
        this.cabinIndex = -1;
    },
}

    このコードは、最初に、利用可能なキャビンの一覧を表示するための cabins prop を作成します。 bookingCreated という名前の 1 つのイベントを、emits を使用して公開します。 cabinIndex という名前のデータ項目を作成して、選択したキャビン インデックスを保管します。

    最後に、bookCabin という名前のメソッドを作成します。 このメソッドは cabinIndex の値をチェックし、値が 0 以上の場合 (ユーザーがキャビンを選択したことを意味します) のみ実行されます。 この検証に合格した場合は、選択した cabinIndex を返すイベントを生成して、cabinIndex を -1 にリセットします。

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

コードが追加されたので、表示に注意を向けることができます。 キャビンを選択するためのドロップダウン リストと、旅行を予約するためのボタンが必要です。 ボタンによって、前に作成した bookCabin 関数が呼び出されます。

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

  2. 次のコードを <template> タグ内に追加して、表示を作成します。

    <section>
<h2>Book now!</h2>
<form>
    <div class="row">
        <label for="cruise-cabin">Select class:</label>
        <select id="cruise-cabin" v-model="cabinIndex">
            <option disabled value="-1">Select a cabin</option>
            <option v-for="(cabin, index) in cabins" :value="index" :key="index">
                {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
            </option>
        </select>
    </div>
    <div class="row">
        <button class="button" type="button" @click="bookCabin">Book now!</button>
    </div>
</form>
</section>

    HTML でフォームが作成されます。 v-for を使用して cabins prop をループして、ドロップダウン リストを作成します。 select タグのモデルを cabinIndex にバインドします。これは、ユーザーがキャビンを選択してボタンを選択したときに返されます。 次に、選択されたときに bookCabin を呼び出すように、ボタンを設定します。

BookingForm をページに追加する

最後に、新しく作成した BookingForm をアプリケーションに追加するために、それを Host.vue に追加します。

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

  2. 次のコードを TODO: Register next component コメントの後に追加して、BookingForm をインポートします。

    import BookingForm from './BookingForm.vue';

  3. 次のコードを TODO: Add next component コメントの後に追加して、BookingForm を使用可能なコンポーネントの一覧に追加します。

    BookingForm

  4. 次のコードを TODO: Add methods コメントの後に追加して、bookingCreated カスタム イベントを処理するメソッドを追加します。

    methods: {
    addBooking(cabinIndex) {
        const cabin = this.cruise.cabins[cabinIndex];
        const booking = {
            cabin: cabin.name,
            price: cabin.price
        }
        this.bookings.push(booking);
    }
}

    addBooking 関数は、インデックスを使用して、選択したキャビンを取得します。 その後、この関数は、cabin.name および cabin.price を使用して新しい booking オブジェクトを作成します。 次に booking を bookings 配列に追加します。

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

    <booking-form @booking-created="addBooking" :cabins="cruise.cabins"></booking-form>

    addBooking 関数を booking-created イベントに接続して、表示するキャビンの一覧を渡します。

キャビンの種類を表示する

予約の情報を表示するようにテンプレートを変更しましょう。 前回の演習で表示した "サンプル" 予約メッセージの代わりに、予約ごとのキャビンの種類を表示します。

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

  2. <template> 要素内で、div 内のフィールド名を booking.name から booking.cabin に変更します。

    <div class="row" v-for="(booking, index) in bookings" :key="index">
    <div>{{ booking.cabin }} </div>
</div>

ページをテストする

すべてのコードが追加されたので、ページをテストしてみましょう。

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

  2. http://localhost:8080 に移動して、ページを最新の情報に更新してください。

  3. ドロップダウン リストでキャビンを選択して、ボタンを選択します。

    新しい予約が表示されます。

    Screenshot of the final application with the form shown on the left and list on the right.

これで、カスタム イベントを使用してコンポーネントを作成し、呼び出すことができました。