Passing an image source to a scoped slot in Vue.js

user_7381790 0
Viewed 1326

I'm lost, I've read the documentation on slots and looked over a few examples, but it's not clicking for me right now.

I cannot figure out how to pass an image source to <img :src=""> within a slot.

Relevant Blade.Php file:

<image-upload>
    <template v-slot:completed-crop-preview >
        <div class="mb-2 flex space-x-2">
            <img :src="image" class="mb-2 w-16 h-16 rounded-full border-como border-2 border-dashed"
            alt="picture upload preview">
        </div>
    </template>
</image-upload>

Relevant Vue.js template:

<div>
    <slot name="completed-crop-preview" v-bind:image="imagePreview">
    </slot>
</div>

According to my developer tools, imagePreview is being set just fine and this did work just fine when before I moved the preview to a slot.

vuejs2 vue-component laravel vue.js javascript
1 Answers

You could receive slot props as follows :

<image-upload>
    <template v-slot:completed-crop-preview="{image}" >
        <div class="mb-2 flex space-x-2">
            <img :src="image" class="mb-2 w-16 h-16 rounded-full border-como border-2 border-dashed"
            alt="picture upload preview">
        </div>
    </template>
</image-upload>
user_81728570
Related