Typescript＆Vue.jsでonchangeした要素のvalueを取得

Question

表題のとおりなのですが、
いくつか並ぶinputをonchangeした要素のvalueを取得したいです。

<input id="hoge1" type="number" min="1" max="100" step="1" required="required" name="num1" v-model="num1" @change="onChange" />

<input id="hoge2" type="number" min="5" max="10" step="0.1" required="required" name="num2" v-model="num2" @change="onChange" />

<input id="hoge3" type="number" min="100" max="10000" step="10" required="required" name="num3" v-model="num3" @change="onChange" />

このようなinputがあり、
この中の一つだけをonchangeした際に、
そのonchangeした要素のvalueだけ取得するにはどうすればいいでしょうか？

現状は以下のようなコードで、
一個ずつidを振って対応していますが、
これを「onchangeされた要素のvalue」という条件で書き換えたいです。

onChange() {
 const element1 = document.getElementById('hoge1') as HTMLInputElement;
 const value1: string = element1.value;
 console.log(value1);

 const element2 = document.getElementById('hoge2') as HTMLInputElement;
 const value2: string = element2.value;
 console.log(value2);

 const element3 = document.getElementById('hoge3') as HTMLInputElement;
 const value3: string = element3.value;
 console.log(value3);
}

よろしくお願いいたします。

Answer 1

イベントハンドラに渡されるイベントオブジェクトから対象の要素を取得してください

onChange(e) {
   console.log(e.target.name);
   console.log(e.target.value);
},

※型は適宜指定してください

Comments

[weak_man]

ありがとうございました。うまくいきました。