Bootstrap-Vue component customize card

Question

I begin and learn about VueJS 2 programmation. I need to add cards in my website. I created my own component 'Cards.vue', I've include the card component prodided by Bootstrap-Vue Cards.vue should be used in Home.vue. I have to modify the several "img-src" in Home.vue.

Code of Cards.vue :

    <template>
    <div>
      <b-card
        title="Card Title"
        img-src="../../assets/images/fondLBM.png"
        img-alt="One's image alt"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="mb-2"
      >
        <b-card-text>
          <slot name="text"> 
"Some quick example text to build on the card title and make up the bulk of the card's content."</slot>
        </b-card-text>

        <b-button href="#" variant="primary">
            <slot name="button-txt"> Go somewhere </slot>
        </b-button>
      </b-card>
    </div>
    </template>

    <script>
    export default{
        name : 'CardS'
    }
    </script>

My code in Home.vue :

    <section class="bg-light py-5">
      <h2>Section</h2>
      <b-container>
        <b-row>
          <b-col>
            <bscard>
              
              <template v-slot:text>
                <p>One's product</p>
              </template>
              <template v-slot:button-txt>
                <span>Got it !</span>
              </template>
            </bscard>
          </b-col>
          <b-col>
            <bscard imgsrc="imgsrc[1]">
              <template v-slot:text>
                <p>One's product</p>
              </template>
              <template v-slot:button-txt>
                <span>Got it !</span>
              </template>
            </bscard>
          </b-col>
          <b-col>
            <bscard v-bind:imgsrc="imgsrc[2]">
              <template v-slot:text>
                <p>One's product</p>
              </template>
              <template v-slot:button-txt>
                <span>Got it !</span>
              </template>
            </bscard>
          </b-col>
        </b-row>
      </b-container>
    </section>
<script>
// @ is an alias to /src
import CardS from "@/components/Contents/Cards.vue";

export default {
  name: "Home",
  components: {
    bscard: CardS
  },
  data(){
    return {
      imgsrc : [
      'https://picsum.photos/600/300/?image=25', 
      'https://picsum.photos/600/300/?image=25', 
      'https://picsum.photos/600/300/?image=25']
    }
  }
}
</script>

Eric Eric · Accepted Answer · 2020-09-18T15:49:32

If you want to add an image in your card, you should add a prop to your component.

https://vuejs.org/v2/guide/components-props.html

<script>
export default{
    name : 'CardS',
    props:["imagePath"]

}
</script>

and in you template

<template>
...
<img
:scr:"imagePath"
</template>

And in you home page

<bscard :src="imgsrc[1]">

Bootstrap-Vue component customize card

1 Answers