Triggering bootstrap components by clicking on an image in VueJS 2 with Vue-Bootstrap

Question

original title: VueJS with Bootstrap, stretched link with hidden button

I am trying to make clickable bootstrap cards in a VueJS project, I want clicking the card to open a collapsible element within the card, right now I have something that works using a button with the "stretched-link" class

                            <b-card 
                                v-bind:img-src="`https://via.placeholder.com/200`"
                                img-alt="Image" 
                                img-top 
                                tag="article" 
                                style="max-width: 20rem;" 
                                class="mb-2">
 
                                <b-button v-b-toggle="'collapse-'  + unique-identifier" variant="primary" class="stretched-link ">Toggle</b-button>
                                <b-collapse v-bind:id="'collapse-' + unique-identifier" class="mt-2">
                                    <b-card>This is the collapsed content</b-card>
                                </b-collapse>
                            </b-card>

I'm trying to make this work without having a visible button in the card, I've tried using the invisibile class and the d-none class (class="stretched-link d-none" and class="stretched-link invisible")

In both cases, the button is made invisible but so is the stretched link. Is there any way to maintain the active stretched link area while hiding the button icon?

Answer 1

ok I figured out a solution for my particular use case with JQuery,

What I was really after was a clickable image with the functionality of a bootstrap button. So this is a solution for that problem, not exactly hidden stretched links.

In my Vue component I define the triggerButton method, which finds a button by its id and clicks it.

<script>
import $ from 'jquery'

export default {
    props: //just filling this for structure,
    data() {
        return {
           //stuff
        }

    },
    async mounted() {
       //more placeholder structure
    },
    methods: {
            //here is the sauce
            triggerButton(id) {
                $("#"+id).click();
            },
        }
}
</script>

Then in the <template> body I have a hidden button. "unique-identifier" is just a unique number that is put in, it's needed in my case because im generating many of these elements in a for loop and they need to have distinct ids.

In this case I'm using the bootstrap button to trigger a unique modal.

<b-button style="display:none" v-bind:id="'button'+ unique-identifier" v-b-modal="'modal' + unique-identifier">Launch centered modal</b-button>

Then finally I have an image displayed in the bootstrap card, and on click i call the triggerButton method that will now display my modal.

<img v-on:click="showModal('button' + unique-identifier)" :src="`https://placekitten.com/g/200/200`"/>