My Objective:
I want to showcase an image from a dynamic link in Post.vue using the layout of PostLayout.vue
Within PostLayout.vue, there is a <slot> called postFeaturedImage. Inside that slot, there is a <div> where I intend to set the image as the background.
The Tools I'm Using: Laravel, InertiaJS, Vue 3
Here are my Code Snippets:
Post.vue:
<template>
<PostLayout>
<template #postfeaturedImage>
<!-- The image should be displayed here -->
</template>
</PostLayout>
</template>
<script>
import PostLayout from '@/Layouts/PostLayout'
export default {
data() {
return {
featured_image: ''
}
},
components: {
PostLayout,
},
props: {
post: Object /* Received as prop from Controller */
},
mounted () {
this.featured_image = this.post.featured_image
}
}
</script>
PostLayout.vue:
<template>
<slot name="postfeaturedImage" :bgImage="bgImage">
<div :style="`background-image:url(${bgImage}); height: 75vh;`"></div>
</slot>
</template>
<script>
export default {
}
</script>
I've condensed my code for clarity. As I navigate the world of Vue 3 and Inertia, any assistance would be greatly appreciated!