Vue.js 未捕获的引用错误答案

【问题标题】：Vue.js uncaught reference errorVue.js 未捕获的引用错误
【发布时间】：2018-02-07 13:15:47
【问题描述】：

学习Vue 并卡住了。我有一个全新的Laravel 5.4 项目，我用它来学习Vue 概念，使用Pusher/Echo。一切都在消息广播方面工作，消息从服务器获取并按预期显示在页面加载上。我想以编程方式（从项目中的其他地方）将消息发送到队列中。

我使用this example 作为在实例外部访问Vue 方法的指南。

为什么我不能从我的主 JS 文件中访问实例方法？该项目使用webpackFYI 编译。

我的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 组件：

<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>

我想以编程方式将消息发送到队列中，所以在我的app.js 中进行测试，我这样做：

// 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

【问题讨论】：

标签： javascript vuejs2

【解决方案1】：

我所需要的只是使方法名称可用于全局范围吗？

global.chatSystem = chatSystem;      // App variable globally

这似乎现在可以工作了......

【讨论】：