v-on:inputの使い方

v-on ディレクティブを使用して input イベントを監視することで、テキストボックスやテキストエリアなどのフォーム入力要素の変更をリアクティブに処理することができます。これは、ユーザーが入力した内容に基づいてリアルタイムで処理を行いたい場合などに特に便利です。

以下に、v-on ディレクティブを使用して input イベントを監視する例を示します。

<template>
  <div>
    <input type="text" v-model="message" v-on:input="handleInput">
    <p>入力したメッセージ: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '' // テキストボックスに入力されるメッセージ
    };
  },
  methods: {
    // input イベントが発生したときに呼び出されるメソッド
    handleInput(event) {
      // 入力された値を取得して何か処理を行う
      console.log('入力された値:', event.target.value);
    }
  }
};
</script>

この例では、<input> 要素で v-model ディレクティブを使用して message データプロパティを双方向データバインディングしています。さらに、v-on:input ディレクティブを使用して input イベントを監視し、handleInput メソッドを呼び出しています。

handleInput メソッドでは、イベントオブジェクトから入力された値を取得し、必要に応じて処理を行います。この例では、単にコンソールに入力された値を出力していますが、実際のアプリケーションでは、この値を使用してさまざまなタスクを実行することができます。