Vue.js “超出最大调用堆栈大小”错误。为孩子使用对话框并将数据从父母传递给孩子失败

Posted 2023-02-23

【中文标题】Vue.js “超出最大调用堆栈大小”错误。为孩子使用对话框并将数据从父母传递给孩子失败

【英文标题】：Vue.js “Maximum call stack size exceeded” error. Use dialog for child and passing data from parent to child failing

【发布时间】：2020-04-30 21:41:19

【问题描述】：

我正在研究 Vuetify.js，我是 Vue 的新手，我参考了此文档 Vuetify Dialogs，用于从此链接 Open a Vuetify dialog from a component template in VueJS 创建 Matheus Dal'Pizzol 的对话框和解决方案，以将其与组件分开。 结果我有子组件作为对话框如下

家长

    <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: []
        ;
      ,
    ...

儿童

    <template>
      <v-dialog v-model="show" max- 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>

但是，当我单击icon-button“超出最大调用堆栈大小”时出现异常。 似乎有一个连续的循环发生。 请帮忙！我错过了什么吗？

【参考方案1】：

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

【参考方案2】：

也许尝试在v-btn 中使用v-on:click.stop 而不是@click.stop，因为这是 Vue 2.x 的推荐语法。