Home / Questions / 190661
Accepted
Juan Pablo B
Asked: 2020-08-23 07:14:09 +0800 CST 2020-08-23 07:14:09 +0800 CST

Parent component does not detect event fired by child

  • 772

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

datatables component:

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

and in component B I import this component:

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



<script>
    import datatables from '../tables/datatables';
    // import pagination from '../tables/pagination';

    export default {
        name: "userdraw",

        components: {
            datatables: datatables
        },
        methods: {
            filterSearch(){
                alert(1);
            },
        }
    }

</script>

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

vue.js

1 Answers

  1. Best Answer

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

    VUE transforms uppercase names to lowercase names, so an event named filterSearch, will be transformed into an event filtersearch(note the lack of case).

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

    If an event name is not called exactly the same as the name fired by the child, this event will not be executed.

    The descriptive documentation is here

    • 2