Parent component does not detect event triggered by child

Question

Parent component does not detect event triggered by child

Navigation

#1 by (2 votes)

2

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:

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 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!

vue.js

asked by Juan Pablo B 22.08.2018 в 17:14

source

1 answer

Change color of border in Chartjs Life of a snake in JSP

score 2 · Accepted 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