CODEWITHSUNDEEP
parameter-passingvuejs3eventemitter
Dusan
Dusan

Reputation: 145

How to emit event from child to parent? vuejs3

Hello I have emitted method from child component(Pagination.vue) to parent(Home.vue).

Pagination is working like it is supposed to but I get vue warn and error.

[Vue warn]: Unhandled error during execution of native event handler .

And I get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith') I didn't create startsWith

Here is the code:

Pagination.vue component

 <div class="pagination">
      <button class="btn btn-secondary paginate-prev" @click="$emit(handleFilters({prevPage: currentPage}))">Prev</button>
      <div class="links">
        <span 
          v-for="link in links" 
          :key="link.id" 
          >
          <a :class="link.active ? 'active' : '' " href="#" @click="$emit(handleFilters({showPage: link.label}))">{{link.label}}</a></span>
      </div>
      <button class="btn btn-secondary paginate-next" @click="$emit(handleFilters({nextPage: currentPage}))">Next</button>
    </div>
export default {
      props: {
        links: Object,
        currentPage: Number
      },
      methods: {
        handleFilters(payload){
    
          this.$emit('handle-filters', payload)
        }
      }
    }

Home.vue parent

<pagination :currentPage="currentPage" :links="links" @handle-filters="handleFilters"/>

If you need something more tell me. Again everything is working but I want to remove error and warning.

Upvotes: 1

Views: 685

Answers (1)

Dusan
Dusan

Reputation: 145

I have fixed it.

Instaed of @click="$emit(handleFilters({nextPage: currentPage}))"

I wrote @click="handleFilters({nextPage: currentPage})"

I tried the new way but I get a lot of errors and I can't make it work.

Upvotes: 0

Related Questions