2
学習Vueとスタック。私はPusher/Echoを使ってVueの概念を学ぶために使っている全く新しいLaravel 5.4プロジェクトを持っています。すべてがメッセージブロードキャストの観点から動作しており、メッセージはサーバーからフェッチされ、期待どおりにページの読み込みに表示されます。私は計画的に（プロジェクトの他のどこかから）キューにメッセージを送りたいと思う。Vue.jsキャッチされていない参照エラー
Vueメソッドをインスタンス外にアクセスするためのガイドとしてthis exampleを使用しています。
メインJSファイルからインスタンスメソッドにアクセスできないのはなぜですか？プロジェクトはwebpack FYIでコンパイルされています。
マイVue.jsファイル：
$(document).ready(function()
{
Vue.component('chat-system', require('../components/chat-system.vue'));
var chatSystem = new Vue({
el: '#system-chat',
data: {
sysmessages: []
},
created() {
this.fetchMessages();
Echo.private(sys_channel)
.listen('SystemMessageSent', (e) => {
this.sysmessages.unshift({
sysmessage: e.message.message,
player: e.player
});
});
},
methods: {
fetchMessages() {
axios.get(sys_get_route)
.then(response => {
this.sysmessages = response.data;
});
},
addMessage(sysmessage) {
this.sysmessages.unshift(sysmessage);
this.$nextTick(() => {
this.$refs.sysmessages.scrollToTop();
});
axios.post(sys_send_route, sysmessage)
.then(response => {
console.log(response.data);
});
},
sendMessage(sysmessage) {
if (sysmessage !== '') {
this.$emit('systemmessagesent', {
player: this.player,
message: sysmessage
});
}
}
}
});
});
マイVue.jsコンポーネント：私は、テストするために、私のapp.jsにおけるよう
<template>
<div id="round-status-message" class="round-status-message">
<div class="row">
<div class="col-xs-12" v-for="sysmessage in sysmessages">
{{ sysmessage.message }}
</div>
</div>
</div>
</template>
<script>
export default {
props: ['player', 'sysmessages'],
data() {
return {
newSysMessage: ''
}
},
methods: {
scrollToTop() {
this.$el.scrollTop = 0
},
sendMessage() {
this.$emit('systemmessagesent', {
player: this.player,
message: this.newSysMessage
});
this.newSysMessage = ''
}
}
};
</script>
は、私は、プログラム的にキューにメッセージを送信したい：
// TESTING SYSTEM MESSAGES - DELETE
window.setInterval(function(){
var resp = {};
resp.data = {
id: 1,
message: "She hastily put down yet, before the end of half.",
progress_id: 1,
created_at: "2017-08-17 14:01:11",
updated_at: "2017-08-17 14:01:11"
};
chatSystem.$refs.sysmessages.sendMessage(resp);
console.log(resp);
}, 3000);
// TESTING SYSTEM MESSAGES - DELETE
しかし、私はUncaught ReferenceError: chatSystem is not defined