Thursday, March 15, 2018

Event_Bus vue variable access to single file component Vue.js – Larvel Mix - development

Event_Bus vue variable access to single file component Vue.js – Larvel Mix

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.



from Laravel Questions and Answers https://laravelquestions.com/laravel/event_bus-vue-variable-access-to-single-file-component-vue-js-larvel-mix/
via Lzo Media

No comments:

Post a Comment