[Vuejs]-How to pass selected options from component (b-card) and pass it to multiselect component in vue

by

0👍

You can pass the data either through vuex or through eventBus. You didn’t show logic for your vuex strore, but you showed emits, so I’ll show the eventBus logic. I have skipped any data transformation logic, I show just how you can pass the data.

In your main.js file you need to declare your eventBus. it must be declared before the Vue app is declared.

export const eventBus = new Vue(); // this must come before creating Vue app
new Vue({ 
  el: '#app',
  render: h => h(App)
})

In both your components you need to import the eventBus:

import {eventBus} from '<path to main.js>'

In the b-card component you emit the data in a method of your choosing, I used handleFormResultClick for this example:

handleFormResultClick () { 
  eventBus.$emit('selected', query) // where query is the data you want to pass
}

In the multiselect component you need to set up a listener for your event using created lifecycle hook. The $on method takes as a parameter a callbcak function where you have access to the data passed from the other component and can process them there:

created() {
    eventBus.$on('selected', (query) => {
        // process your query data in this callback function
    })
}

Leave a comment