Activating Vue-Bootstrap components through an image click event in VueJS 2

Question

Activating Vue-Bootstrap components through an image click event in VueJS 2

Seeking to achieve: VueJS integration with Bootstrap for clickable cards

I am currently working on a VueJS project where I want the cards to be clickable and reveal collapsible elements upon click. To accomplish this, I have implemented a button with the "stretched-link" class that activates the collapse feature when clicked.

                            <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 have attempted to hide the button within the card by using classes like "d-none" and "invisible" (

class="stretched-link d-none"

and

class="stretched-link invisible"

), but it also hides the stretched link area. Is there a way to keep the activated link area while concealing the button icon?

html css vuejs2 bootstrap-vue

Answer 1

Answer №1

After some experimentation with JQuery, I managed to find a solution that worked for my specific scenario.

My goal was to create a clickable image that functioned like a bootstrap button. This solution addresses that need, rather than focusing on hidden stretched links.

Within my Vue component, I implemented the triggerButton method, which locates a button by its id and triggers a click event.

<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>

In the <template>, I included a hidden button. The "unique-identifier" serves as an individual marker necessary in my situation where multiple elements are generated in a loop.

For this example, I utilized a bootstrap button to trigger a particular modal.

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

To complete the setup, I added an image within a bootstrap card, with a click event calling the triggerButton method to display the modal.

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

Answer 2

After some experimentation with JQuery, I managed to find a solution that worked for my specific scenario.

My goal was to create a clickable image that functioned like a bootstrap button. This solution addresses that need, rather than focusing on hidden stretched links.

Within my Vue component, I implemented the triggerButton method, which locates a button by its id and triggers a click event.

<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>

In the <template>, I included a hidden button. The "unique-identifier" serves as an individual marker necessary in my situation where multiple elements are generated in a loop.

For this example, I utilized a bootstrap button to trigger a particular modal.

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

To complete the setup, I added an image within a bootstrap card, with a click event calling the triggerButton method to display the modal.

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

Activating Vue-Bootstrap components through an image click event in VueJS 2

Answer №1

Similar questions

Error in Vue.js and Socket.io - the server response cannot contain the wildcard '*' when the request has its credentials mode set to 'include'

Create precise shapes by tracing images with an SVG generator

When attempting to transfer data from an Ajax HTML form to a Flask template in Python upon clicking a button, encountered difficulties

Arranging information within the Ngb-Accordion

What are some ways to maintain the aspect ratio of an image with two dimensions?

"Create a New Browser Tab When User Interacts with a Hyperlink leading to an External Website

Initially, my PDF file does not get selected, except in the Internet Explorer browser

Angular Material Popup - Interactive Map from AGM

posting data and redirecting fails when using an ajax button

What is the best way to transfer variables between HTML and PHP?

Why do CSS media queries stop working at exactly 5 distinct resolution sizes? This seems odd

How are these background images able to remain in a fixed position like this?

What is the best way to access the inner html of every cell within a table row that I have selected?

Efficiently running multiple PHP pages with just one simple click

Using jQuery to create clickable URLs within a rollover div

Steps to obtain the precise source code of a webpage

Customizing the main icon in the Windows 10 Action Center through a notification from Microsoft Edge

Compass - substitute a single value for an alternate attribute

I am working on an HTML form that is designed vertically, but I am unsure of how to arrange two text fields side by side on the same line

Experience the magic of CSS Sprite once it's been successfully uploaded!