【Vue】Cannot read property ‘value’ of undefined

事象

Vueで子コンポーネントであるInputフォームから親コンポーネントへ値を渡す際に

開発者ツールのコンソールに表示される

Cannot read property ‘value’ of undefined

が発生して、フォームになにか入力したら即座にエラーが発生してしまいました。

コンポーネントたち

子コンポーネント

<template>
  <v-text-field
    type="text"
    :value="value"
    :counter="counter"
    :label="label"
    required
    @input="updateValue"
  />
</template>

<script>
export default {
  name: 'InputForm',
  props: {
    value: { type: String, default: '' },
    counter: { type: Number, default: 20 },
    label: { type: String, default: 'defaultname' }
  },
  methods: {
    updateValue (e) {
      this.$emit('input', e.target.value) //ここの書き方がダメ
    }
  }
}
</script>

親コンポーネント

// コンポーネントの呼び出し部分のみ
<input-form v-model="fullname" :label="nameLabel" :counter="11" /

v-modelを使っている場合はthis.$emit('input', e)にしないといけない

子コンポーネントのthis.$emit('input', e.target.value)がダメみたいです。

公式ドキュメントの該当箇所
https://jp.vuejs.org/v2/guide/components.html#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7-v-model-%E3%82%92%E4%BD%BF%E3%81%86

一応一度は読んだことはあったがちゃんと理解してなかったな。

というか、v-modelが何たるかをちゃんと理解していないことがわかった＼(^o^)／

v-modelとは？

vue.js

<input v-model="searchText">

// 下のことと同じらしい
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value" //ここがミソ
>

v-on:input="searchText = $event.target.value"というのが
v-modelには含まれているらしい。

なので、子コンポーネントで$emit('input', $event.target.value)とすると親コンポーネントでは

searchText = $event.target.value.target.valueを実行していることになるっちゅうことですな。

そらエラー出るで！！

イベントから値の抽出はv-modelがやってくれるのです。

子コンポーネントからはイベントそのものを渡せばいい(.target.value不要)

ということで、子コンポーネントから親コンポーネントに入力値を渡す場合は

vue.js

  methods: {
    updateValue (e) {
      this.$emit('input', e) //イベントをそのまま渡す!!
    }
  }

というふうに書き換えればよいというのが正解ですね。

インラインで書くなら

vue.js

    @input="$emit('input', $event)"

※thisが不要になるんですね。

まとめ

エラーをもとに、公式ドキュメントを読み下して行くことで少しずつ理解が深まり、ドキュメントを読む力がついてきますね。

Qiitaや技術ブログ記事も参考になりますが、基本的に「公式ドキュメントのどこに当たるのか」ということを意識して理解することが大切だと思いました！！

参考にした記事
https://chico-shikaku.com/2021/05/emit-cannot-read-property-value/

ちゃんと公式ドキュメントの該当箇所のリンクを貼っていてくれて助かりました。

これから私も意識いたしますm(__)m