Я работаю над Vuetify. js, и я новичок ie в Vue, я отправил этот документ Vuetify Dialogs для создания диалога и решения Matheus Dal'Pizzol по этой ссылке Откройте диалоговое окно Vuetify из шаблона компонента в VueJS , чтобы отделить его от компонента. В результате у меня есть дочерний компонент в виде диалогового окна, как показано ниже
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>
Однако, Я получаю исключение, когда нажимаю icon-button «Превышен максимальный размер стека вызовов». Кажется, что происходит непрерывное l oop. Пожалуйста помоги! Я что-то упустил?
