##はじめに
v-selectで開発をしている際に、メソッド経由でイベントの値をどのように取得するかを少し戸惑ったのでメモします。
##経緯
v-selectで表示される値（本のタイトル）を選択した際に、選択時の値（本のタイトルid）を取得したい時に、どのようにするのがベストプラクティスなのかを少し悩みました。
具体的には以下のようなv-selectの時です。
Trouble.vue
<template>
...
<v-select
v-model="title"
:item="titleText"
@change="fetchTitle"
item="text"
item-value="value"
label="本のタイトルを選択"
dense />
...
</template>
##方法
結論：イベントハンドラ関数の使用をすること
Example1.vue
<template>
...
<v-select
v-model="title"
:item="titleText"
@change="fetchTitle"
item="text"
item-value="value"
label="本のタイトルを選択"
dense />
...
</template>
<script>
...
fetchTitle (event) {
// eventに選択した値が含まれている
}
...
</script>
上記のv-selectのv-onでfetchTitle（）イベントメソッドを実行する際にfetchTitleのように括弧を省きます。
省くことでイベントオブジェクトにアクセスできることで、v-selectで選択した値を取得することができます。
Example2.vue
<template>
...
<v-select
v-model="title"
:item="titleText"
@change="fetchTitle(titleText, $event)"
item="text"
item-value="value"
label="本のタイトルを選択"
dense />
...
</template>
<script>
...
fetchTitle (titleText, event) {
// eventに選択した値が含まれている
}
...
</script>
上記のようにイベントメソッドに$eventのオブジェクトを渡すことで他の引数も渡すことができます。
##例題
Example.vue
<template>
<div id="app">
<ul>
<li v-for="example in examples">
<input type="text" @change="onChange(example.id, $event)">
</li>
</ul>
</div>
</template>
<script>
new Vue({
el: '#app',
data() {
return {
examples: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 3, name: 'C' }
]
}
},
methods: {
onChange(id, event) {
console.log(id)
console.log(event)
}
}
})
</script>