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?
