I'm fairly new to working with Vue.js and I've encountered an issue with the child to parent emit functionality.
Essentially, I have a Box component that contains a Search component. In the Search component, I attempted the following:
@Watch("searchValue", { immediate: true })
onSearch(value: string, oldValue: string) {
console.log(this.searchValue); // this is logged OK
this.$emit("search-val-change", this.searchValue);
}
In the box component template:
<box @search-val-change="doSearch">
<search></search>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</box>
In the box.ts file:
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class Box extends Vue {
doSearch() {
console.log("TEST EMIT"); // nothing is console logged, means it doesn't come to this part at all
}
}
I am receiving the following error:
[Vue warn]: Property or method "doSearch" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
...even though it is defined as a method. I am using the Vue Class Decorator which allows me to define methods directly.
Is there something wrong with the syntax or flow of my code?