Why do i get "RangeError: Maximum call stack size exceeded"?

Question

I created search bar and when I press enter then send request to server.

HTML file:

<v-text-field
  outlined
  dense
  label="Search..."
  append-icon="mdi-magnify"
  @keydown.enter="searchEvent($event.target.value)"
></v-text-field>

TS file:

methods: {
        ...mapActions('event', ['searchEvent']),
        
        searchEvent(value: string){
            this.searchEvent(value)
}

VUEX file:

searchEvent({ commit}, value) {
        console.log(value)
        EventApi.search(value)
            .then( result => {
               commit('searchEvents', result.data)
            })
            .catch( error => {
            
                console.error("Error: ", {error:error});
                
            })
    },

Answer 1

this.searchEvent(value)

Is calling itself, giving you an infinite recursive loop. Which eventually exceeds the stack size (limit). You should import searchEvent from Vuex such that the names don't clash. Maybe removing this could already be enough though.