Всем привет. Задача крайне простая. Я создал компонент: Popup.vue
<template>
<div class="popup" v-if="visibility">
<div class="popup__overlay" @click="$emit('close-popup')"></div>
<div class="popup__inner">
<div class="popup__title-bar">
<span class="popup__title">{{ title }}</span>
<button class="popup__close-btn" @click="$emit('close-popup')"></button>
</div>
<div class="popup__content">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Popup",
props: {
title: {
type: String,
required: true
},
visibility: {
type: Boolean,
required: true
}
}
}
</script>
<style scoped>
</style>
И второй компонент ConfirmedPopup.vue, который подключает первый:
<template>
<Popup :title="title" :visibility="visibility">
<span>{{ question }}</span>
<button @click="confirmedCallback">Да</button>
<button @click="$emit('close-popup')">Нет</button>
</Popup>
</template>
<script>
import Popup from './Popup.vue';
export default {
name: "Popup",
components: {
Popup
},
props: {
title: {
type: String,
required: true
},
visibility: {
type: Boolean,
required: true
},
question: {
type: String,
required: true,
default: ''
},
confirmedCallback: {
type: Function,
required: true
},
},
methods: {
}
}
</script>
<style scoped>
</style>
Подключаю второй компонент:
<ConfirmPopup :title="'Удаление товара'" :question="('Вы действительно хотите удалить товар #' + item.ID + '')" :visibility=deleteFormVisibility :confirmed-callback="deleteItem"/>
По получаю ошибку:
Maximum call stack size exceeded
Буд-то я подключаю компоненты рекурсивно, но это не так.
Почему такое может быть?
