Vue.js “超出最大调用堆栈大小"错误.为子项使用对话框并将数据从父项传递给子项失败 [英] Vue.js “Maximum call stack size exceeded” error. Use dialog for child and passing data from parent to child failing

问题描述

我正在研究 Vuetify.js，我是 Vue 的新手，我参考了这个文档

解决方案

那是因为你的 v-dialog 在 v-for 循环中，它很常见 问题.要解决它，请将 :retain-focus="false" 作为道具添加到您的 v-dialog

I am working on Vuetify.js and I am a newbie in Vue, I referred this document Vuetify Dialogs for creating dialog and solution of Matheus Dal'Pizzol from this link Open a Vuetify dialog from a component template in VueJS to separate it to the component. The result I have child component as dialog as below

Parent

    <template>
      <v-container fluid>
        <v-row dense>
          <v-col cols="12">
            <v-btn large color="success">Add product</v-btn>
          </v-col>
          <v-col cols="3" v-for="product in products" :key="product.id">
            <v-card class="mx-auto" outlined>
              <v-list-item three-line>
                <v-list-item-content>
                  <v-list-item-title class="headline mb-1">{{product.name}}</v-list-item-title>
                  <v-list-item-subtitle>{{product.title}}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-card-actions>
                <v-btn dark color="cyan" @click.stop="showScheduleForm = true">
                  <v-icon dark>mdi-television</v-icon>
                </v-btn>
                <v-btn color="primary">Detail</v-btn>
              </v-card-actions>
            </v-card>
            <modal-detail v-model="showScheduleForm" :productDetailInfo="product"></modal-detail>
          </v-col>
        </v-row>
      </v-container>
    </template>

    <script>
    import axios from "axios";
    import ModalDetail from "./ModalDetail.vue";
    export default {
      name: "HelloWorld",
      components: {
        ModalDetail
      },
      data: function() {
        return {
          showScheduleForm: false,
          products: [],
          errors: []
        };
      },
    ...

Child

    <template>
      <v-dialog v-model="show" max-width="500" v-if="Object.keys(productDetailInfo).length !== 0">
        <v-card>
          <v-card-title class="headline grey lighten-2" primary-title>{{ productDetailInfo.name }}</v-card-title>

          <v-card-text>{{ productDetailInfo.title }}</v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" text @click.stop="show = false">Close</v-btn>
            <v-btn color="primary">Detail</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </template>
    <script>
    export default {
      name: "ModalDetail",
      props: {
        productDetailInfo: {
          type: Object
        },
        value: Boolean
      },
      computed: {
        show: {
          get() {
            return this.value;
          },
          set(value) {
            this.$emit("input", value);
          }
        }
      }
    };
    </script>

However, I am getting an exception when I click icon-button "Maximum call stack size exceeded". It seems there is a continuous loop happening. Please help! Am I missing something?

解决方案

That's because your v-dialog is in v-for loop, it's common problem. To workaround it add :retain-focus="false" as a prop to your v-dialog

这篇关于Vue.js “超出最大调用堆栈大小"错误.为子项使用对话框并将数据从父项传递给子项失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！