Question

学习Vue并坚持下去。我有一个全新的Laravel 5.4项目，我用它来学习Vue概念，使用Pusher/Echo。所有这些都在消息广播方面起作用，消息从服务器获取并按预期在页面加载时显示。我想以编程方式（从项目中的其他位置）向队列发送消息。

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

为什么我无法从主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组件：

<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

Answer 1

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

global.chatSystem = chatSystem;      // App variable globally

这似乎现在有效......

Vue.js未被引用的引用错误

1 个答案: