Maximum call stack size exceeded Vuetify

Question

I am Using Vuetify Dialog And this is My code

<v-dialog  max-width="390" persistent  v-model="dialog">
  <template v-slot:activator="{ on }">
    <v-btn icon v-if="el.items_count == 0" v-on="on" >
        <v-icon>
          mdi-plus
        </v-icon>
      </v-btn>
  </template>
  <v-card flat>
    <v-card-title>
      this is Son for {{el.title}}
    </v-card-title>
    <v-text-field class="d-block pa-2" v-model="name" outlined label="Name"></v-text-field>
    <v-card-actions>

      <v-btn @click="add" class="d-block">
        <span>Add</span>
      </v-btn>
      <v-btn @click="dialog=false" class="d-block">
        <span>Close</span>
      </v-btn>
    </v-card-actions>
  </v-card>
    </v-dialog>

and this dialog inside loop and get this error after clicking button

Uncaught RangeError: Maximum call stack size exceeded.
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)

can any one Help me with that error

Answer 1

Setting :retain-focus="false" on v-dialog helps too.

Answer 2

I just had the same error. Moving the dialog outside of my loop fixed the problem. You have to handle opening and closing your dialog yourself:

<v-dialog v-model="open"> ... </v-dialog>
<... v-for="thing in things">
    <v-btn @click="open = true"> ... </v-btn>
</...>

data() {
  return {
    open: false
  }
}

Answer 3

This will help you too

<v-dialog v-model="dialog" max-width="900px" persistent :retain-focus="false">
 ...
</v-dialog>