Parent component does not detect event triggered by child


I have a component that is a table and I have a search button with the next event.

Component datatables:

<input type="text" class="form-control" @keyup="$emit('filterSearch')" v-model="search">

and in component B I import this component:

    <datatables  @filter-search="filterSearch()">

    import datatables from '../tables/datatables';
    // import pagination from '../tables/pagination';

    export default {
        name: "userdraw",

        components: {
            datatables: datatables
        methods: {


The question that when I write in the input search some letter / word I want a method to be executed in the parent component, but I never skip the filterSearch alert!

asked by Juan Pablo B 22.08.2018 в 17:14

1 answer


The names of the events in vue are declared as they come.

VUE transforms names in upper case to lower case names, therefore, an event called filterSearch , will be transformed into an event filtersearch (note the lack of capital letters).

The VUE documentation recommends using kebab-case (that is, separating words with hyphens) to avoid differences between them.

If an event name is not called exactly like the name triggered by the child, this event will not be executed.

The descriptive documentation is here

answered by 22.08.2018 / 17:28