Event_Bus vue variable access to single file component Vue.js - Laravel Mix

Question

I just want to ask on how to access a variable to the single file component of vue? When i try to access my app on the browser the vue js will result an error.

Error in mounted hook: "ReferenceError: EventBus is not defined"

My code below.

I implement this on the app.js

window.Vue = require('vue');
var EventBus = new Vue();

    Vue.component('transactionslist', require('./components/TransactionList.vue'));

    const app = new Vue({
        el: '#transaction',
        methods: {
            getTransactions: function () {
                $.getJSON("/guard/station/transactions?search=" + this.Search, function (_transactions) {
                    this.Transactions = JSON.parse(JSON.stringify(_transactions));
                }.bind(this));
            }
        },
        data() {
            return {
                Search: '',
                Transactions: [],
            }
        },
        mounted: function () {
            this.getTransactions();

        }
    });

and this is my vue component (TransactionList.vue)

<template>
    <table class="table table-hover transaction-list">
        <thead>
            <tr>
                <th class="fit">Transfer Code</th>
                <th>Orgin</th>
                <th>Destination</th>
                <th class="fit">Date Created</th>
            </tr>
        </thead>
        <tbody>
            <transactionRow @rowSelected="isSelectedRow" v-for="trans in data" :origin="trans.Origin" :destination="trans.Destination"
                :date="trans.created_at" :key="trans.TransferCode" :tscode="trans.TransferCode">
            </transactionRow>
        </tbody>
    </table>
</template>

<script>
    export default {
        props: ['data'],
        created() {
            this.transactions = this.$children;
        },
        data() {
            return {
                transactions: [],
                Transaction: []
            }
        },
        methods: {
            isSelectedRow: function (payload) {
                EventBus.$emit('showSelected', payload);
                this.transactions.forEach(transaction => {
                    transaction.isActive = (transaction.tscode == payload.tscode);
                });
            },
        }

    }
</script>

I develop the application using laravel and I use one of laravel feature which is the laravel Mix.

score 3 · Accepted Answer · answered Mar 15 '18 at 09:16

3

Just use this:

window.EventBus = new Vue();

answered Mar 15 '18 at 09:16

Pavel

918
7
18

Hello! Well, `window` is a global object for client side, so you assign a variable to it and can use it on this page. [more info](https://stackoverflow.com/questions/4862193/difference-between-variable-declaration-syntaxes-in-javascript-including-global/4862268#4862268) – Pavel Mar 16 '18 at 08:13

score 2 · Answer 2 · answered Mar 15 '18 at 09:21

2

You just defined the EventBus in the app.js file.

It is not accessible in the TransactionList.vue component as it has no reference to the EventBus

So export the EventBus in your app.js as

export const EventBus = new Vue();

And then import the EventBus in your components script as

<script>
    import {EventBus} from './path/to/app.js'
    export default {

    }
</script>

See es6 import and export

answered Mar 15 '18 at 09:21

Vamsi Krishna

30,568
8
70
78

hi sir i have tried this one but it will error during the npm compilation. – Kevin Loquencio Mar 16 '18 at 01:01

score 1 · Answer 3 · answered Mar 15 '18 at 09:19

Create the event bus in it's own file:

// bus.js
import Vue from 'vue'
const bus = new Vue()
export default bus

The import it into the components you want to use it in:

import bus from 'bus'
export default { 
   ...
   methods: {
       myMethod () {
           bus.$emit('my-event', 'test')
       }
    }
   ...
}

Event_Bus vue variable access to single file component Vue.js - Laravel Mix

3 Answers3