Vueにおけるv-on:changeディレクティブの使用方法と例

基本的な使用方法: v-on:changeディレクティブを要素に追加することで、その要素の値が変更されたときに実行されるメソッドを指定できます。例えば、以下のコードでは、input要素の値が変更されるたびに、"handleChange"メソッドが呼び出されます。

<input type="text" v-on:change="handleChange">

methods: {
  handleChange() {
    console.log("値が変更されました");
  }
}

イベントオブジェクトの利用: v-on:changeディレクティブを使用すると、イベントオブジェクトを受け取ることもできます。以下の例では、イベントオブジェクトを使って、変更された値を取得しています。

<input type="text" v-on:change="handleChange($event)">

methods: {
  handleChange(event) {
    console.log("値が変更されました。新しい値は:" + event.target.value);
  }
}

メソッド内で引数を渡す: v-on:changeディレクティブを使用する際、メソッドに引数を渡すこともできます。以下の例では、"handleChange"メソッドに引数として追加の値を渡しています。

<input type="text" v-on:change="handleChange('追加の値')">

methods: {
  handleChange(extraValue) {
    console.log("値が変更されました。追加の値は:" + extraValue);
  }
}

以上のように、v-on:changeディレクティブを使用することで、要素の変更イベントを監視し、それに応じてアクションを実行することができます。これを活用することで、Vueアプリケーションのインタラクティビティを向上させることができます。