1

I'm trying to emit an event from child to parent in class based components, but following errors happen:


[Vue warn]: Error in v-on handler: "TypeError: can't access property "submit", vm._events is undefined"



found in

---> <Input> at src/components/Input.vue
       <MainContent> at src/components/MainContent.vue
         <App> at src/App.vue
           <Root>



TypeError: "can't access property "submit", vm._events is undefined"

Here is my code:

Input component (child):


<template>
  <div id="InputContainer">
      <input @keyup.enter="onInputSubmit" />
      <button @click="onInputSubmit">submit</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class Input extends Vue {
    onInputSubmit = (input: string): void => {
        console.log(input)
        this.$emit("submit",  input)
    };
}
</script>

And parent:

<template>
  <div id="MainContent">
    <Input @submit="searchSummoner" />
    <SummonersTable />
  </div>
</template>

<script lang="ts">

import { Component, Prop, Vue } from "vue-property-decorator";
import Input from "./Input.vue";
import SummonersTable from "./SummonersTable.vue";

@Component({
  components: {
    Input,
    SummonersTable
  }
})
export default class MainContent extends Vue {
  searchSummoner = (input: string): void => {
    console.log("input")
  };
}
</script>

Initially my event was camel case which can cause issues so i changed it. I also thought it might be the scopes inside classes but i use arrow functions so not sure how to tackle this issue.

black-hat-rabbit
  • 11
  • 1

1 Answers1

0

try to write like this

  searchSummoner(input: string) {
     console.log("input")
  };
odo
  • 19
  • 4