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

I think the problem may be caused by the `v-if` attribute in your dialog activator slot. Try removing that and see if it fixes it. If you want to hide the dialog button, maybe try moving the `v-if` to the dialog itself, i.e. `` — morphatic, Apr 26 '20 at 20:28
There is a work around for v-dialog inside loop. [enter link description here](https://stackoverflow.com/a/62018919/12185738) — Gaurav, Jun 16 '20 at 09:25

score 46 · Answer 1 · answered Oct 20 '20 at 22:03

46

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

answered Oct 20 '20 at 22:03

RomkaLTU

3,683
8
40
63

score 18 · Accepted Answer · answered May 16 '20 at 14:45

18

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
  }
}

answered May 16 '20 at 14:45

Dunk Fordyce

196
1
4

This solved my issue as well. Can I ask why this is the case? – mp252 Mar 31 '23 at 08:58

score 5 · Answer 3 · edited Dec 23 '20 at 03:48

5

This will help you too

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

edited Dec 23 '20 at 03:48

General Grievance

4,555
31
31
45

answered Dec 23 '20 at 03:14

Mark Altiche

69
1
1

Nelson La Rocca · Answer 4 · 2021-04-14T20:15:29.850

1

on Nuxt adding <client-only> enclosing the element solved the problem

edited Apr 14 '21 at 20:15

answered Apr 13 '21 at 05:22

Nelson La Rocca

173
1
9

Maximum call stack size exceeded Vuetify

4 Answers4