VueJs - reuse component and pass through background-image - css

Question

Im trying to reuse a component i VueJs. This is the first time Im using Vue.
I have a couple of components in app.vue. And one of them I want to use two times with the only differens between them is the text and the background-image.
I can't wrap my head around how Im gonna make that work. Any Ideas???
App.vue
<!-- first contact banner -->
<lrContactBanner bannerText="The text to the first component"></lrContactBanner>
<!-- second contact banner -->
<lrContactBanner bannerText="text text" backgroundImage="contact.jpeg"></lrContactBanner>
ContactBanner.vue
<div class="banner parallax overlay" :style="{ 'background-image': backgroundImage }">
<div class="container section">
<div class="columns">
<div class="column">
<h3> {{ bannerText }} </h3>
</div>
</div>
</div>
</div>
<script>
export default {
name: 'lrContactBanner',
props: ['bannerText', 'backgroundImage']
}
</script>
<style>
.parallax {
/* background-image: url("../img/lrImage.jpg"); */
height: 250px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
</style>

Answer 1

You need to use bound props with v-bind:bannerText or short-hand :bannerText to pass the values to the Banner component. You also need to use quoted single quotes to pass a string to the component since it's looking for an object by default. Here's a working example.
<lrContactBanner :bannerText="'text text'" :backgroundImage="'contact.jpeg'"></lrContactBanner>
For the background-image I would actually use a computed property like
<template>
<div class="banner parallax overlay" :style="style">
<h3>{{ bannerText }} </h3>
</div>
</template>
<script>
export default {
props: ['bannerText', 'backgroundImage', 'color'],
computed: {
style() {
return 'background-image: url(' + this.backgroundImage + ')';
}
}
}
</script>