Я просто хочу спросить, как получить доступ к переменной в однофайловом компоненте vue? Когда я пытаюсь получить доступ к своему приложению в браузере, vue js приведет к ошибке.
Ошибка в подключенном хуке: «ReferenceError: EventBus не определен»
Мой код ниже.
Я реализую это на 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();
}
});
и это мой компонент vue (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>
Я разрабатываю приложение с использованием laravel, и я использую одну из функций laravel - laravel Mix.