$emit(‘input’, $event.target.value)でTypeError: Cannot read property ‘value’ of undefined
今回はVueを使用しているときに、$emit('input’, $event.target.value)を使ってTypeError: Cannot read property 'value’ of undefinedとなってしまう場合の対処法についてご紹介いたします。
$emit('input’, $event.target.value)でTypeError: Cannot read property 'value’ of undefined
私の体験になりますが、v-modelを使用して「Unexpected mutation of “" prop vue/no-mutating-props」のESLintのエラーが出たときなどに、シンタックスシュガーとして
|
1 2 |
:value="testValue" @input="$emit('input', $event.target.value)" |
を使用したときがありました。
しかし、上記のように書いたときに表題の「TypeError: Cannot read property 'value’ of undefined」というエラーが出てしまったのです。
結論を書くと、カスタムコンポーネントでv-modelを使う場合は
$event.target.value
の代わりに
$event
を使うようにしましょう。
上記の例では
|
1 2 |
:value="testValue" @input="$emit('input', $event)" |
とする必要があります。
公式ドキュメントにも書いてありましたね。
https://jp.vuejs.org/v2/guide/components.html#コンポーネントで-v-model-を使う
ぜひ参考にしてみてください。
終わりに
今回はVueを使用しているときに、$emit('input’, $event.target.value)を使ってTypeError: Cannot read property 'value’ of undefinedとなってしまう場合の対処法についてご紹介いたしました。