前へ

次へ

演習 - イベント ハンドラーを追加する

完了

ここで、アプリケーションを更新して、ページに新しく作成したボタンのイベント ハンドラーを追加します。 このボタンは、booking.completed フラグを切り替えて、表示を更新します。

関数を追加する

まず、Vue アプリケーションに追加します。

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

2. TODO: Add methods コメントの後の行に次のコードを追加して bookCabin 関数を作成します。 この関数は、イベント ハンドラーです。

   // TODO: Add methods
   methods: {
       bookCabin() {
           this.booking.completed = true;
       }
   }
   

   this が現在のアプリケーションにバインドされていることに注目してください。 これにより、データから booking オブジェクトにアクセスできます。

ボタンをフォームに追加する

次に、ボタンをフォームに追加します。

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

2. TODO: Add button later コメントの後の行に次の HTML を追加してボタンを作成します。

   <!--TODO: Add button later -->
   <button class="button" type="button" @click="bookCabin">Book now!</button>
   

   @click 属性が、先ほど作成した bookCabin 関数にバインドされていることに注目してください。

ページをテストする

次に、更新されたページをテストします。

1. [ファイル]>[すべて保存] を選択して、すべてのファイルを保存します。
2. Ctrl + Shift + P キーを押してコマンド パレットを開きます。 Mac では、Cmd + Shift + P キーを押します。
3. 「Live Server」と入力し、Live Server: Open with Live Server を選択して、Live Server を確実に実行します。
4. ブラウザーを開き、http://localhost:5500 に移動します。 ページにボタンが表示されるようになりました。
5. フォームに入力して、ボタンを選択します。 ページからフォームが消えたことがわかります。

以上で、Vue でイベント ハンドラーが構成されました。

続行