#javascript #vue.js #vuejs3 #inertiajs
Вопрос:
Чего я пытаюсь достичь:
Отобразить изображение из динамической ссылки в Post.vue, которое соответствует макету PostLayout.vue
В PostLayout.vue у меня есть <слот> с именем postFeaturedImage, и внутри слота есть <слот><div>, я хочу использовать изображение в качестве его фона.
Что я использую: Laravel, InertiaJS, Vue 3
Мои коды таковы:
Сообщение.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>
Я удалил все ненужные коды. Я новичок в Vue 3 и инерции и нуждаюсь в помощи!
Ответ №1:
Альтернативным подходом будет создание FeaturedImage
компонента. Кроме того, вы можете ссылаться на почтовое изображение непосредственно из реквизита, который вы получаете. В этом случае нет необходимости в data
методе и mounted
в этом случае.
<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>
Ответ №2:
Добавьте реквизит в свой PostLayout.vue
<script>
export default {
props: {
bgImage: { type: String },
},
};
</script>
И оцените этот реквизит в своем посте.vue
<template>
<PostLayout :bgImage="featured_image"> </PostLayout>
</template>
И если вы когда-нибудь захотите опубликовать пост без изображения и другого макета, вам следует это сделать :
<template>
<PostLayout>
<template #postfeaturedImage> post without background image</template>
</PostLayout>
</template>