Vue.js uncaught參考錯誤

學習Vue並卡住。我有一個全新的Laravel 5.4項目，我用它學習Vue概念，使用Pusher/Echo。所有工作都在消息廣播方面進行，消息從服務器獲取，並按預期在頁面加載時顯示。我想以編程方式（從項目中的其他地方）將消息發送到隊列中。Vue.js uncaught參考錯誤

我使用this example作爲訪問實例外方法Vue的指南。

爲什麼我不能從我的主JS文件訪問實例方法？該項目編號爲webpack供參考。

我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

來源

2017-08-30 TheRealPapa

我所需要的只是使方法名可用於全局範圍？

global.chatSystem = chatSystem;  // App variable globally

這似乎是現在的工作...

來源

2017-08-30 00:13:36 TheRealPapa

Vue.js uncaught參考錯誤

回答

相關問題