为何触发"RangeError: Maximum call stack size exceeded"错误？（Vue搜索场景）

You've hit a classic infinite recursion issue here—let's walk through why this is happening and how to fix it.

What's Causing the Stack Overflow? #

Looking at your TypeScript code:

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

Here's the root problem:

• You first use mapActions to import the Vuex action searchEvent into your component's methods.
• Then you define a new, identically named method searchEvent right after it. This overwrites the mapped Vuex action in your component's method scope.
• Inside this custom method, you call this.searchEvent(value)—which ends up calling the method itself, not the Vuex action. This creates an infinite loop: the method calls itself repeatedly, adding a new stack frame each time until the browser hits its maximum stack limit, triggering the RangeError.

How to Fix It #

You have two clean, straightforward options to resolve this:

Option 1: Remove the custom wrapper method (simplest approach)

Since you're just passing the value directly to the Vuex action, you don't need the custom method at all. Bind the mapped action directly to your @keydown.enter event:

Updated HTML:

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

Updated TS:

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

Option 2: Rename your custom method to avoid conflict

If you need to add component-side logic before dispatching the Vuex action, rename your component method so it doesn't clash with the mapped action name:

Updated TS:

methods: { 
  ...mapActions('event', ['searchEvent']), 
  // Rename the component method to avoid overlap
  handleSearch(value: string){ 
    // Add any pre-processing logic here (e.g., validation) if needed
    this.searchEvent(value) // Now this correctly calls the Vuex action
  }
}

Updated HTML:

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

Either approach breaks the infinite recursion loop and lets your search flow work as intended.

内容的提问来源于stack exchange，提问作者javorkabotond