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