CODEWITHSUNDEEP
javascriptvue.jsvuejs3inertiajs
Fariaz Khan
Fariaz Khan

Reputation: 35

Vue 3 pass data in <slot>

What I am trying to achieve:
Display an image from dynamic link in Post.vue, which follows the layout of PostLayout.vue

In PostLayout.vue, I have a <slot> named postFeaturedImage, and inside the slot, there is a <div>, I want to use the image as the background of it.

What I am using: Laravel, InertiaJS, Vue 3

My codes are:

Post.vue:

<template>
    <PostLayout>
        <template #postfeaturedImage>
            <!-- Here I want to display the image -->
        </template>
    </PostLayout>
</template>

<script>
import PostLayout from '@/Layouts/PostLayout'

export default {
    data() {
        return {
            featured_image: ''
        }
    },
    components: {
        PostLayout,
    },
    props: {
        post: Object /* Passed the 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 removed all irrelevant codes. I am a beginner in Vue 3 and Inertia and in need of help!

Upvotes: 1

Views: 4119

Answers (2)

Matheus Dal&#39;Pizzol
Matheus Dal&#39;Pizzol

Reputation: 6105

An alternative approach will be creating a FeaturedImage component. Also, you can reference the post image directly from the props you receiving. There's no need for the data method and the mounted in this case.

<template>
   <PostLayout>
      <template #postfeaturedImage>
         <FeaturedImage :src="post.featured_image" />
      </template>
   </PostLayout>
</template>

<script>
import PostLayout from '@/Layouts/PostLayout'
import FeaturedImage from '@/Layouts/FeaturedImage'

export default {
   components: {
      PostLayout,
      FeaturedImage
   },
   props: {
      post: Object
   }
}
</script>

Upvotes: 1

Florent Bouisset
Florent Bouisset

Reputation: 1075

Add a props to your PostLayout.vue

<script>
export default {
  props: {
    bgImage: { type: String },
  },
};
</script>

And give a value to that props in your Post.vue

<template>
    <PostLayout :bgImage="featured_image"> </PostLayout>
</template>

And if you ever want to have a post without an image and a different layout you should do :

<template>
    <PostLayout>
      <template #postfeaturedImage> post without background image</template>
    </PostLayout>
</template>

Upvotes: 1

Related Questions