はじめに
イベントオブジェクトを取得することで、inputタグのvalue値を即時に画面表示する方法を記録。
イベントオブジェクト取得
inputイベント（要素のvalueの値が変化するたびに発生）でsetNameメソッドを発火させる。この時、イベントオブジェクトを取得するためにsetNameメソッドの引数にeventを設定。
HTML
<body>
<section id="events" v-cloak>
<h2>Enter Your Name!</h2>
<input type="text" @input="setName">
<p>Your Name:{{ name }}</p>
</section>
</body>
Javascript
const app = Vue.createApp({
data() {
return {
name:''
};
},
methods:{
setName(event){
console.log(event)
},
}
}).mount('#events');
eventオブジェクトの中身
targetのタブをさらに開くとValueの項目があり、入力値が表示されている。
この値を使用することで、画面に入力値を表示できる。
入力値をそのまま表示Ver
HTML
<body>
<section id="events" v-cloak>
<h2>Enter Your Name!</h2>
<input type="text" @input="setName">
<p>Your Name:{{ name }}</p>
</section>
</body>
Javascript
const app = Vue.createApp({
data() {
return {
name:''
};
},
methods:{
setName(event){
this.name = event.target.value;
},
}
}).mount('#events');
入力値を整形して表示Ver
setNameの引数に$eventを設定。
<body>
<section id="events" v-cloak>
<h2>Enter Your Name!</h2>
<input type="text" @input="setName($event,'山田')">
<p>Your Name:{{ name }}</p>
</section>
</body>
const app = Vue.createApp({
data() {
return {
name:''
};
},
methods:{
setName(event,lastName){
this.name = event.target.value + ' ' + lastName;
},
}
}).mount('#events');
終わりに
入力値をリアルタイムで反映できるのは、結構使い勝手が良いと感じた。
他のアプリケーション作成にも活用していきたい。
参考
Vueの勉強で活用中⇒https://www.udemy.com/course/vuejs-2-the-complete-guide/