Too much recursion/Maximum call stack size exceeded

Very new to Vue (and web dev in general), and I can’t seem to figure this one out. The aim is to have a list of “clients”, each with an “Edit” button which when clicked brings up a dialog box. The current behavior is that when the “Edit” button is clicked, I get a “too much recursion”/“maximum call stack size exceeded” error (first error is from Firefox, the second is from Chrome), and everything grinds to a halt. I have to force quit my browser.

If I remove the v-for and simply duplicate the li twice, I do not get an error and everything appears to work as expected… but I don’t see anything wrong with my v-for, so I’m not sure what the issue is.

Below is my Clients.vue component code:

<template>
  <div>
    <v-app>
    <template>
    <ul>
      <li v-for="client in clients" :key="client">
       <v-layout>
         <v-dialog v-model="dialog" persistent max-width="600px">
           <template v-slot:activator="{ on }">
             <v-btn color="primary" dark v-on="on">Edit</v-btn>
           </template>
           <v-card >
             <v-card-title>
               <span class="headline">Edit Client</span>
             </v-card-title>
             <v-card-text>
               <v-container grid-list-md>
                 <v-layout wrap>
                   <v-flex xs12 sm12 md12>
                     <v-text-field required></v-text-field>
                   </v-flex> 
                 </v-layout>
               </v-container>
             </v-card-text>
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
               <v-btn color="blue darken-1" flat @click="dialog = false">Save</v-btn>
             </v-card-actions>
            </v-card>
          </v-dialog>
        </v-layout>
      </li>       
    </ul>
  </template>
  </v-app>
</div>
</template>

<script>
export default {
  name: 'Clients',
  data: function() {
    return {
      clients: ['Microsoft', 'Apple', 'Google', 'Amazon'],
      dialog: false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

What’s about the v-app compontent? Does it include your Clients Component?
If not, please provide more information about the exact error and more code of your component.

<template>
  <div>
    <v-app>           <!-- What's this component, do you need it? -->
      <template>
        ...
      </template>
    </v-app>
  </div>
</template>

Hi sandro,

The below is taken straight from the vuetify FAQ:

Ensure that your components are wrapped with a v-app element. If you are using an element to activate the component that is not placed into the activator slot, ensure that you stop propagation of the click event. These components utilize the v-outside-click directive and will immediately close.

I’m not entirely sure how v-app works from a technical perspective, but I do know that without it
nothing works.

Removing the v-for and simply repeating the li block of code (so that there’s multiple “Edit” buttons) results in the code running without a problem… which is why I suspect the issue is with my vue code rather than my vuetify code. Though I could be wrong.

The error is as I mentioned in the first post. It’s difficult to troubleshoot as my browser freezes up. Chrome console looks like this (and it just keeps incrementing, so I assume it’s stuck in a loop):

9502vuetify.js?ce5b:6508 Uncaught RangeError: Maximum call stack size exceeded.
at VueComponent.onFocusin (vuetify.js?ce5b:6508)
at VueComponent.onFocusin (vuetify.js?ce5b:6508)
at VueComponent.onFocusin (vuetify.js?ce5b:6508)
at VueComponent.onFocusin (vuetify.js?ce5b:6508)
at VueComponent.onFocusin (vuetify.js?ce5b:6508)
at VueComponent.onFocusin (vuetify.js?ce5b:6508)
at VueComponent.onFocusin (vuetify.js?ce5b:6508)
at VueComponent.onFocusin (vuetify.js?ce5b:6508)
at VueComponent.onFocusin (vuetify.js?ce5b:6508)
at VueComponent.onFocusin (vuetify.js?ce5b:6508)

I’m not sure what other code I can provide you, I only have that one component.

Apologies if this isn’t helpful, as I said I’m new to Vue and web dev. If there’s anything in particular I can do/retrieve that would help narrow down the problem please do let me know.

Okay, I didn’t know that’s a component of Vuetify.

If you can provide your whole project (either as Git repository or in an online IDE like Stackblitz, CodeSandbox, …) I can take a look.
Otherwise, I don’t know why this is happening and cannot help you, sorry. Maybe someone else has an idea…

The issue lies within using the v-dialog from within a v-for loop. There is a dialog modeled to dialog for every client. The error doesn’t describe the issue well, but just move the dialog outside the loop and all will be good.

I had the same issue. This is related to the v-dialog component.

For some reasons, you have to set :retain-focus="false".

You can read this bug report for further understanding :

I hope it will help :slight_smile:

5 Likes

I solved the issue with adding .stop modifier to the event.
From the docs of vuetify -

If for some reason you are unable to use the activator slot, be sure to add the .stop modifier to the event that triggers the dialog.