Right, so I'm using the async/await wrong, nothing to do with Mix as far as I'm aware.
Async await in vue component compiling with Laravel Mix
Hi everyone.
I've written the following methods in a .vue component utilising async/await on an axios post request call. However, when running the code it doesn't appear the async/await stuff is working as some of the variables that get set using it return undefined until the end of the execution of the code. I've stripped the code down to what I think are the important parts, happy to show more if needed.
resources/assets/js/components/PrintTicketDashboard.vue
printTicket() {
let ticketInfo = this.saveTicket() // <-- async method is invoked here, see below
let zplCommand = this.buildZplCommand()
let printJob = this.printZpl(zplCommand)
},
async saveTicket() {
const response = await axios.post('/tickets/store', {
'department_id': this.ticket.department.id,
'student_id': this.ticket.student.id,
'ticket_data': JSON.stringify(this.ticket)
})
const createdAt = new Date(response.data.created_at)
this.ticket.sequenceNumber = response.data.sequence_number
this.ticket.dateTime = `${createdAt.getHours()}:${createdAt.getMinutes()} ${createdAt.getDate()}/${createdAt.getMonth() + 1}/${createdAt.getYear()}`
/*
^--- these props are accessed in buildZplCommand() and printZpl() invoked in method above but return undefined until end of execution
*/
},
I'm using laravel mix to compile my assets and was under the impression the mix.js() method will compile any ES2015 (such as async/await) as mentioned here https://laravel.com/docs/5.4/mix#working-with-scripts.
I've tried mix.babel() instead but got some errors that I couldn't make sense of, perhaps I need a babel.rc file?
app.js
Vue.component('print-ticket-dashboard', require('./components/PrintTicketDashboard.vue'));
const app = new Vue({
el: '#app'
});
webpack.mix.js
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.browserSync('ticket.dev')
.disableNotifications();
Any ideas on what I might be doing wrong here?
Please or to participate in this conversation.