V-диалог не отображается при нажатии v-btn внутри v-data-tables

Я новичок в vuejs и использую vuetify. Я просто хочу показать диалоговое окно при нажатии кнопки внутри таблицы v-data. Это то, что я сделал до сих пор.

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

v-диалог

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

каждый раз, когда я нажимаю кнопку, мой браузер зависает, а в журнале консоли написано слишком много рекурсии

Заранее спасибо.

🤔 А знаете ли вы, что...
Vue.js имеет дружелюбный и понятный API, что облегчает изучение и использование фреймворка.

[РЕШЕНО]Перейти к решению

4 474

Vue.js21668 вопросов Vuetify.js1719 вопросов

Ответы:

Рекурсия vuetify пытается открыть слот в слоте в слоте... Похоже, сам слот вашего шаблона открывается каждый раз, когда он открывается.

Я бы посоветовал вам прочитать этот ответ, в котором даны подробные пояснения по использованию v-slot:activator.

Решено

Просто поместите диалоговое модальное окно за пределы таблицы и откройте его программно с помощью простой кнопки:

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

V-диалог не отображается при нажатии v-btn внутри v-data-tables

Ответы:

Интересные вопросы для изучения