VueJs - reuse component and pass through background-image

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>

Steven B. · Accepted Answer · 2017-12-05 15:23:00Z

2

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>

edited Dec 5, 2017 at 15:23

answered Dec 5, 2017 at 15:11

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lacon Over a year ago

Thanks!!! :) I almost got it working. But is it any difference between a picture that is from a link as "via.placeholder.com/350x150" or a picture that I have in a folder to my project? I want to target a picture inside my img folder but I cant seem to get it to work like that. I see that the background-image and url is applied to the div but i dont see any picture.

Steven B. Over a year ago

@Lacon are you sure you're referencing the correct path to it? and also you have to make sure that the element that has the background image has a height and width.

Lacon Over a year ago

I have added the styling for the div that im appling the background-image on. But i think that it is something with the path to the image that is the problem.

Collectives™ on Stack Overflow

VueJs - reuse component and pass through background-image

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related