$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のエラーが出たときなどに、シンタックスシュガーとして

を使用したときがありました。

しかし、上記のように書いたときに表題の「TypeError: Cannot read property ‘value’ of undefined」というエラーが出てしまったのです。

結論を書くと、カスタムコンポーネントでv-modelを使う場合は
$event.target.value
の代わりに
$event
を使うようにしましょう。

上記の例では

とする必要があります。

公式ドキュメントにも書いてありましたね。
https://jp.vuejs.org/v2/guide/components.html#コンポーネントで-v-model-を使う

ぜひ参考にしてみてください。

終わりに

今回はVueを使用しているときに、$emit(‘input’, $event.target.value)を使ってTypeError: Cannot read property ‘value’ of undefinedとなってしまう場合の対処法についてご紹介いたしました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Vue.js

Posted by ちこ