inputFormにテキストを入力するとCannot read property 'value' of undefinedというエラーが出ます。

Question

vue-bootstrapを使用しています。
事象は題名の通りです。
知見のある方助けていただけると幸いです。

子コンポーネント

<template>
  <div>
  <b-form-group>
  <b-form-input
    :type="type"
    :name="name"
    :value="value"
    :placeholder="placeholder"
    @input="updateValue"
  ></b-form-input>
  </b-form-group>
  </div>
</template>

<script>
export default {
  name: "InputText",
  props: {
    value: {type: String, require: true},
    type: { type: String, require: true },
    name: { type: String, require: true },
    placeholder: { type: String, require: false }
  },
  methods: {
    updateValue: function(e) {
      this.$emit("input", e.target.value)
    }
  }
}
</script>

<style>

</style>

親コンポーネント

<template>
<div>
<b-card>
  <b-form :model="signInForm">
    <InputText
      v-model="signInForm.loginId"
      placeholder="Login ID"
      name="loginId"
      type="text"
    />
    <InputText
      v-model="signInForm.password"
      placeholder="password"
      name="password"
      type="text"
    />
    <Button @on_click="onSubmit" name="signIn" buttonText="SignIn"/>
  </b-form>
</b-card>
</div>
</template>

<script>
import　api from "../../utils/Client.js"
import InputText from "../atoms/InputText"
import Button from "../atoms/Button"
export default {
  name: "SignIn",
  data() {
    return {
      signInForm: {
        loginId: "",
        password: ""
      }
    };
  },
  methods: {
    updateValue() {

    },
    onSubmit() {
      console.log(this.signInForm)
      api.signIn(this.signInForm)
    }
  },
  components: {
    InputText: InputText,
    Button: Button
  }
};
</script>

<style>
</style>

エラー文

Error in v-on handler: "TypeError: Cannot read property 'value' of undefined"

found in

---> <BFormInput>
       <BFormGroup>
         <InputText> at src/components/atoms/InputText.vue
           <SignIn> at src/components/pages/SignIn.vue
             <App> at src/App.vue
               <Root>

Answer 1

カスタムコンポーネントで，v-modelを使う場合$event.target.valueではなく，$eventを使います (参考: コンポーネントの基本 — Vue.js)。

つまり，以下のように直せばOKです。

  methods: {
    updateValue: function(e) {
      // this.$emit("input", e.target.value)
      this.$emit("input", e)
    }
  }