v-dialog not showing upon clicking the v-btn inside v-data-tables

Question

I'm new to vuejs and I'm using vuetify.I just want to show a dialog upon clicking the button inside the v-data-table. This is what I have done so far.

https://codepen.io/iskaryote1/pen/GbYjZJ?&editable=true&editors=101

v-dialog

<v-dialog v-model="dialog" persistent max-width="290">
          <template v-slot:activator="{ on }">
            <v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
          </template>
          <v-card>
            <v-card-title class="headline">Use Google's location service?</v-card-title>
              <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="green darken-1" flat @click="dialog = false">Disagree</v-btn>
              <v-btn color="green darken-1" flat @click="dialog = false">Agree</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

everytime I click the button, my browser hangs and the console log says too much recursion

Thanks in advance.

score 3 · Accepted Answer · answered Jul 07 '19 at 15:45

Just put the dialog modal outside the table and open it programmatically with a simple button:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1">
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
        <td>
          <v-btn color="primary" dark @click="dialog = true">Open Dialog</v-btn>
        </td>
      </template>
    </v-data-table>

    <v-dialog v-model="dialog" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">Use Google's location service?</v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="dialog = false">Disagree</v-btn>
          <v-btn color="green darken-1" flat @click="dialog = false">Agree</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>    
  </v-app>
</div>

It works, but do you have any idea why my the other one is not working? — siobeh, Jul 07 '19 at 16:00

score 0 · Answer 2 · answered Jul 07 '19 at 14:40

0

The recursion is vuetify trying to open a slot in a slot in a slot... Looks like your template slot itself is opening itself every time it opens itself.

I'd advise you to read this answer that gives detailed explanations on the use of v-slot:activator.

answered Jul 07 '19 at 14:40

Samuel-Zacharie Faure

1,047
11
26

I also tried without the activator https://codepen.io/pen/?&editable=true&editors=101 but same result i get. Can you advise how can i solve this? – siobeh Jul 07 '19 at 14:57
Your link here is empty – Samuel-Zacharie Faure Jul 07 '19 at 15:02
oops sorry. here's the link https://codepen.io/iskaryote1/pen/ydRVwL – siobeh Jul 07 '19 at 15:14

v-dialog not showing upon clicking the v-btn inside v-data-tables

2 Answers2