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

Unable to display information from a repeated `textarea` in ngRepeat

Clicking to enter fullscreen mode on a website will result in the Fullscreen API automatically closing

The dialog box is not taking up the full width of the browser window

What is the process for triggering a PHP function when a form element is clicked in a webpage?

Having trouble resizing divisions using three.js?

Personalized Bootstrap grid rows and columns

Following the submission of a message, the textarea automatically inserts a line-break

Show different JSON data based on the existence of another key in Javascript

Resetting the randomness in a function within a sudoku generator implemented in JavaScript

Inquiring about browserify or webpack on a website using node - a few queries to consider

showcasing real-time webcam information within an HTML web application

Breaking or wrapping lines in Visual Studio Code

Establish a universal default component for Vue route configurations

When the width is set to 100vh, there is excessive white space beneath the div

The JQuery code is failing to remove the dynamically added field when the delete icon is clicked

anchor text substitution for hyperlink

I am having trouble grasping the concept of CSS and the first-child selector

What is the default way to toggle content in rows using Material UI?

ClickAwayListener in MUI has the potential to impact all the elements within a popper when attempting

Expand the width of the image to fill the entire screen