Issue:
does not display the expected object.<pre>{{ $slots.title() }}</pre>
This is the parent component
ModalView.vue
<script setup>
import { ref } from 'vue'
import Modal from '@/components/Modal.vue'
import { btnStyleDark } from '@/styles/tailwindStyles'
const showModal = ref(false)
</script>
<template>
<div>
<h1>Modals</h1>
<button @click="showModal = true" :class="btnStyleDark">Show Modal</button>
<Modal v-if="showModal" @close="showModal = false" :btn-style="btnStyleDark">
<template #title>My New Title</template>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel tempora quibusdam tenetur,
debitis autem fugit a nesciunt mollitia ipsa inventore nostrum perspiciatis neque dolor id
magnam facere eum similique? Adipisci.
</p>
</Modal>
</div>
</template>
This is the child component
Modal.vue
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
btnStyle: String,
})
const emit = defineEmits(['close'])
</script>
<template>
<teleport to="#modals-container">
<div class="modal z-10 absolute top-0 left-0 w-full h-full p-10 bg-yellow-50">
<h1><slot name="title" /></h1>
<slot />
<pre>{{ $slots.title() }}</pre>
<button :class="btnStyle" @click="$emit('close')">Hide modal</button>
</div>
</teleport>
</template>
Error in Chrome:
TypeError: Converting circular structure to JSON --> starting at object with constructor 'Object' | property 'vnode' -> object with constructor 'Object' --- property 'component' closes the circle at JSON.stringify () at toDisplayString (chunk-U6BEPC57.js?v=60065120:256:154)
If I remove the () from
<pre>{{ $slots.title() }}</pre><pre> tag on the page without an error:
https://example.com/image1.png
However, this data does not provide any useful information and differs from the data displayed in the tutorial video:
Attempts to Resolve
Tested using the useSlots import
Produces the same error, but the first console.log statement works!
<script setup>
import { defineProps, defineEmits, useSlots, onMounted } from 'vue'
const props = defineProps({
btnStyle: String,
})
const emit = defineEmits(['close'])
const slots = useSlots()
console.log(slots.title())
onMounted(() => {
console.log(slots)
})
</script>
<template>
<teleport to="#modals-container">
<div class="modal z-10 absolute top-0 left-0 w-full h-full p-10 bg-yellow-50">
<h1><slot name="title" /></h1>
<slot />
<pre>{{ $slots.title() }}</pre>
<!-- <pre>{{ slots.title ? slots.title()[0] : '' }}</pre> -->
<button :class="btnStyle" @click="$emit('close')">Hide modal</button>
</div>
</teleport>
</template>
Also attempted
<pre>{{ slots.title() }}</pre>$, which still results in the error message being thrown.