vue.js - Vue.js “超出最大调用堆栈大小”错误。对子使用对话框并将数据从父级传递给子级失败
问题描述
我正在研究 Vuetify.js,我是 Vue 的新手,我参考了这篇文档Vuetify Dialogs来创建 Matheus Dal'Pizzol 的对话框和解决方案,从这个链接Open a Vuetify dialog from a component template in VueJS 将其分离到组件. 结果我有子组件作为对话框如下
家长
<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-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>
但是,当我单击icon-button
“超出最大调用堆栈大小”时出现异常。似乎有一个连续的循环发生。请帮忙!我错过了什么吗?
解决方案
那是因为你v-dialog
在v-for
循环中,这是常见的问题。要解决它:retain-focus="false"
作为道具添加到您的v-dialog
推荐阅读
- r - ifelse 在向量的每个元素上
- latex - 如何组合一些期刊论文的乳胶文件并制作一个包含所有具有自己格式的文件?
- python - 忽略 re.sub 命令 python 上的“\n”
- html - matSuffix 使 mat-icon 不在 mat-icon-button 中水平居中
- angular - 动态创建列时的 Ag-grid ExportAsCsv
- python - 解析表
- sorting - 如果 piot 是第一个或最后一个,那么快速排序指针的位置应该是什么?
- shared-hosting - Laravel 5.8,工匠命令错误:由于名称无效,无法解析 dotenv 文件
- reactjs - React - 如何从子 div 路由父 div
- css - 如何创建具有特定度数的四边形(菱形)?