vuejs2 - Call Vue method from separate JS file compiled with webpack -
first time playing laravel 5.4
, vuejs2
, webpack
. have ran issues regards js file scopes before , suspect issue related.
i trying make vue
instance method available called different js file.
my weback.mix.js
:
mix.scripts([ 'resources/assets/js/app-main.js', <-- call vue method here 'resources/assets/js/app-helpers.js', 'resources/assets/js/common/chat.js', <-- vue instance ], 'resources/assets/js/output/app.js' ) .js('resources/assets/js/output/app.js', 'public/js/app.js' );
in chat.js
have vue
instance inside document ready
wrapper (it receives route , channel values b/e):
$(document).ready(function() { vue.component('chat-system-messages', require('../components/chat-system-messages.vue')); vue.component('chat-system-form', require('../components/chat-system-form.vue')); var chatsystem = new vue({ el: '#system-chat', data: { messages: [] }, created() { this.fetchmessages(); echo.private(chat_channel) .listen('chatmessagesent', (e) => { this.messages.unshift({ message: e.chatmessage.message, player: e.player }); }); }, methods: { fetchmessages() { axios.get(chat_get_route) .then(response => { this.messages = response.data; }); }, addmessage(message) { <-- want call method this.messages.unshift(message); this.$nexttick(() => { this.$refs.messages.scrolltotop(); }); axios.post(chat_send_route, message) .then(response => { console.log(response.data); }); } } }); }
the vue
component renders , loads data ok.then in app-main.js
, inside document ready
, call:
// testing system messages - delete window.setinterval(function(){ chatsystem.addmessage("message"); }, 3000);
but result is:
big-risk.js:66839 uncaught referenceerror: chatsystem not defined
how can make method in vue instance available app-main.js
?
Comments
Post a Comment