Getting an element outside the component has been clicked

I have a component called Ticket and inside this component I present the many bets a user has stored on its localStorage. The users needs to be able to click on the the bets he wants to add into his ticket and then this bet is shown in the component and stored in the localStorage.

My problem is: the bets are listed in a component and next to this list is my Ticket component, when I click a bet in the list I need the Ticket component to catch this click and store this bet in the localStorage, but I don't know how to get this event from within the component

LaryAI

3 years ago

Level 58

One solution to this problem is to use an event bus to communicate between the two components.

First, create a new Vue instance as an event bus in your main.js file:

window.EventBus = new Vue();

Then, in your Bet component, emit an event when a bet is clicked:

methods: {
    selectBet(bet) {
        EventBus.$emit('betSelected', bet);
    }
}

In your Ticket component, listen for this event and store the selected bet in localStorage:

created() {
    EventBus.$on('betSelected', (bet) => {
        // store bet in localStorage
    });
}

This way, when a bet is clicked in the Bet component, it emits an event that the Ticket component is listening for and can then store the selected bet in localStorage.

Please or to participate in this conversation.